<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>第 18 章 样式级联 | 前端开发2020版</title>
  <meta name="description" content="掌握前端开发的基础知识" />
  <meta name="generator" content="bookdown 0.17.2 and GitBook 2.6.7" />

  <meta property="og:title" content="第 18 章 样式级联 | 前端开发2020版" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="掌握前端开发的基础知识" />
  <meta name="github-repo" content="yangjh-xbmu/front-end" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="第 18 章 样式级联 | 前端开发2020版" />
  
  <meta name="twitter:description" content="掌握前端开发的基础知识" />
  

<meta name="author" content="杨志宏" />



  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="css-selector.html"/>
<link rel="next" href="css-unit.html"/>
<script src="libs/jquery-2.2.3/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-clipboard.css" rel="stylesheet" />











<style type="text/css">
code.sourceCode > span { display: inline-block; line-height: 1.25; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css\style.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">front-end</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>前言</a><ul>
<li class="chapter" data-level="0.1" data-path="index.html"><a href="index.html#什么是前端网络开发"><i class="fa fa-check"></i><b>0.1</b> 什么是前端网络开发</a></li>
<li class="chapter" data-level="0.2" data-path="index.html"><a href="index.html#本书的特点"><i class="fa fa-check"></i><b>0.2</b> 本书的特点</a></li>
<li class="chapter" data-level="0.3" data-path="index.html"><a href="index.html#本书的目标"><i class="fa fa-check"></i><b>0.3</b> 本书的目标</a></li>
<li class="chapter" data-level="0.4" data-path="index.html"><a href="index.html#在线阅读地址"><i class="fa fa-check"></i><b>0.4</b> 在线阅读地址</a></li>
<li class="chapter" data-level="0.5" data-path="index.html"><a href="index.html#学习资源"><i class="fa fa-check"></i><b>0.5</b> 学习资源</a><ul>
<li class="chapter" data-level="0.5.1" data-path="index.html"><a href="index.html#国外课程"><i class="fa fa-check"></i><b>0.5.1</b> 国外课程</a></li>
<li class="chapter" data-level="0.5.2" data-path="index.html"><a href="index.html#行业导航"><i class="fa fa-check"></i><b>0.5.2</b> 行业导航</a></li>
<li class="chapter" data-level="0.5.3" data-path="index.html"><a href="index.html#技术社区"><i class="fa fa-check"></i><b>0.5.3</b> 技术社区</a></li>
<li class="chapter" data-level="0.5.4" data-path="index.html"><a href="index.html#技术专家博客"><i class="fa fa-check"></i><b>0.5.4</b> 技术专家博客</a></li>
<li class="chapter" data-level="0.5.5" data-path="index.html"><a href="index.html#html"><i class="fa fa-check"></i><b>0.5.5</b> HTML</a></li>
<li class="chapter" data-level="0.5.6" data-path="index.html"><a href="index.html#css"><i class="fa fa-check"></i><b>0.5.6</b> CSS</a></li>
<li class="chapter" data-level="0.5.7" data-path="index.html"><a href="index.html#ui框架"><i class="fa fa-check"></i><b>0.5.7</b> UI框架</a></li>
<li class="chapter" data-level="0.5.8" data-path="index.html"><a href="index.html#javascript"><i class="fa fa-check"></i><b>0.5.8</b> JavaScript</a></li>
<li class="chapter" data-level="0.5.9" data-path="index.html"><a href="index.html#前端兼职"><i class="fa fa-check"></i><b>0.5.9</b> 前端兼职</a></li>
<li class="chapter" data-level="0.5.10" data-path="index.html"><a href="index.html#工具"><i class="fa fa-check"></i><b>0.5.10</b> 工具</a></li>
<li class="chapter" data-level="0.5.11" data-path="index.html"><a href="index.html#前端框架"><i class="fa fa-check"></i><b>0.5.11</b> 前端框架</a></li>
<li class="chapter" data-level="0.5.12" data-path="index.html"><a href="index.html#作品赏析"><i class="fa fa-check"></i><b>0.5.12</b> 作品赏析</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>I HTML</b></span></li>
<li class="chapter" data-level="1" data-path="html-histroy.html"><a href="html-histroy.html"><i class="fa fa-check"></i><b>1</b> HTML 简介</a><ul>
<li class="chapter" data-level="1.1" data-path="html-histroy.html"><a href="html-histroy.html#html-发展简史"><i class="fa fa-check"></i><b>1.1</b> HTML 发展简史</a></li>
<li class="chapter" data-level="1.2" data-path="html-histroy.html"><a href="html-histroy.html#在线学习资源及工具"><i class="fa fa-check"></i><b>1.2</b> 在线学习资源及工具</a></li>
<li class="chapter" data-level="1.3" data-path="html-histroy.html"><a href="html-histroy.html#扩展阅读资料"><i class="fa fa-check"></i><b>1.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="2" data-path="web-standard.html"><a href="web-standard.html"><i class="fa fa-check"></i><b>2</b> Web 标准</a><ul>
<li class="chapter" data-level="2.1" data-path="web-standard.html"><a href="web-standard.html#web-标准产生背景"><i class="fa fa-check"></i><b>2.1</b> Web 标准产生背景</a></li>
<li class="chapter" data-level="2.2" data-path="web-standard.html"><a href="web-standard.html#web-标准的内容"><i class="fa fa-check"></i><b>2.2</b> Web 标准的内容</a></li>
<li class="chapter" data-level="2.3" data-path="web-standard.html"><a href="web-standard.html#扩展阅读材料"><i class="fa fa-check"></i><b>2.3</b> 扩展阅读材料</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="html-term.html"><a href="html-term.html"><i class="fa fa-check"></i><b>3</b> HTML 基础概念及规则</a><ul>
<li class="chapter" data-level="3.1" data-path="html-term.html"><a href="html-term.html#html-基本结构"><i class="fa fa-check"></i><b>3.1</b> HTML 基本结构</a></li>
<li class="chapter" data-level="3.2" data-path="html-term.html"><a href="html-term.html#元素及标签"><i class="fa fa-check"></i><b>3.2</b> 元素及标签</a></li>
<li class="chapter" data-level="3.3" data-path="html-term.html"><a href="html-term.html#属性及属性值"><i class="fa fa-check"></i><b>3.3</b> 属性及属性值</a></li>
<li class="chapter" data-level="3.4" data-path="html-term.html"><a href="html-term.html#特殊字符"><i class="fa fa-check"></i><b>3.4</b> 特殊字符</a></li>
<li class="chapter" data-level="3.5" data-path="html-term.html"><a href="html-term.html#扩展阅读资料-1"><i class="fa fa-check"></i><b>3.5</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="htmlelement.html"><a href="htmlelement.html"><i class="fa fa-check"></i><b>4</b> <code>html</code>元素</a></li>
<li class="chapter" data-level="5" data-path="html-meta.html"><a href="html-meta.html"><i class="fa fa-check"></i><b>5</b> 文档元数据相关元素</a><ul>
<li class="chapter" data-level="5.1" data-path="html-meta.html"><a href="html-meta.html#head"><i class="fa fa-check"></i><b>5.1</b> head</a></li>
<li class="chapter" data-level="5.2" data-path="html-meta.html"><a href="html-meta.html#title"><i class="fa fa-check"></i><b>5.2</b> title</a></li>
<li class="chapter" data-level="5.3" data-path="html-meta.html"><a href="html-meta.html#base"><i class="fa fa-check"></i><b>5.3</b> base</a></li>
<li class="chapter" data-level="5.4" data-path="html-meta.html"><a href="html-meta.html#link"><i class="fa fa-check"></i><b>5.4</b> link</a></li>
<li class="chapter" data-level="5.5" data-path="html-meta.html"><a href="html-meta.html#meta"><i class="fa fa-check"></i><b>5.5</b> meta</a></li>
<li class="chapter" data-level="5.6" data-path="html-meta.html"><a href="html-meta.html#style"><i class="fa fa-check"></i><b>5.6</b> style</a></li>
<li class="chapter" data-level="5.7" data-path="html-meta.html"><a href="html-meta.html#扩展阅读资料-2"><i class="fa fa-check"></i><b>5.7</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="html-sections.html"><a href="html-sections.html"><i class="fa fa-check"></i><b>6</b> 区块元素</a><ul>
<li class="chapter" data-level="6.1" data-path="html-sections.html"><a href="html-sections.html#块元素与行内元素"><i class="fa fa-check"></i><b>6.1</b> 块元素与行内元素</a></li>
<li class="chapter" data-level="6.2" data-path="html-sections.html"><a href="html-sections.html#区块元素"><i class="fa fa-check"></i><b>6.2</b> 区块元素</a><ul>
<li class="chapter" data-level="6.2.1" data-path="html-sections.html"><a href="html-sections.html#body"><i class="fa fa-check"></i><b>6.2.1</b> body</a></li>
<li class="chapter" data-level="6.2.2" data-path="html-sections.html"><a href="html-sections.html#article"><i class="fa fa-check"></i><b>6.2.2</b> article</a></li>
<li class="chapter" data-level="6.2.3" data-path="html-sections.html"><a href="html-sections.html#section"><i class="fa fa-check"></i><b>6.2.3</b> section</a></li>
<li class="chapter" data-level="6.2.4" data-path="html-sections.html"><a href="html-sections.html#nav"><i class="fa fa-check"></i><b>6.2.4</b> nav</a></li>
<li class="chapter" data-level="6.2.5" data-path="html-sections.html"><a href="html-sections.html#aside"><i class="fa fa-check"></i><b>6.2.5</b> aside</a></li>
<li class="chapter" data-level="6.2.6" data-path="html-sections.html"><a href="html-sections.html#h1h2h6"><i class="fa fa-check"></i><b>6.2.6</b> h1,h2,…h6</a></li>
<li class="chapter" data-level="6.2.7" data-path="html-sections.html"><a href="html-sections.html#header"><i class="fa fa-check"></i><b>6.2.7</b> header</a></li>
<li class="chapter" data-level="6.2.8" data-path="html-sections.html"><a href="html-sections.html#footer"><i class="fa fa-check"></i><b>6.2.8</b> footer</a></li>
</ul></li>
<li class="chapter" data-level="6.3" data-path="html-sections.html"><a href="html-sections.html#扩展阅读资料-3"><i class="fa fa-check"></i><b>6.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="html-group.html"><a href="html-group.html"><i class="fa fa-check"></i><b>7</b> 内容组织元素</a><ul>
<li class="chapter" data-level="7.1" data-path="html-group.html"><a href="html-group.html#内容组织相关元素"><i class="fa fa-check"></i><b>7.1</b> 内容组织相关元素</a><ul>
<li class="chapter" data-level="7.1.1" data-path="html-group.html"><a href="html-group.html#p"><i class="fa fa-check"></i><b>7.1.1</b> p</a></li>
<li class="chapter" data-level="7.1.2" data-path="html-group.html"><a href="html-group.html#address"><i class="fa fa-check"></i><b>7.1.2</b> address</a></li>
<li class="chapter" data-level="7.1.3" data-path="html-group.html"><a href="html-group.html#hr"><i class="fa fa-check"></i><b>7.1.3</b> hr</a></li>
<li class="chapter" data-level="7.1.4" data-path="html-group.html"><a href="html-group.html#pre"><i class="fa fa-check"></i><b>7.1.4</b> pre</a></li>
<li class="chapter" data-level="7.1.5" data-path="html-group.html"><a href="html-group.html#blockquote"><i class="fa fa-check"></i><b>7.1.5</b> blockquote</a></li>
<li class="chapter" data-level="7.1.6" data-path="html-group.html"><a href="html-group.html#ol"><i class="fa fa-check"></i><b>7.1.6</b> ol</a></li>
<li class="chapter" data-level="7.1.7" data-path="html-group.html"><a href="html-group.html#ul"><i class="fa fa-check"></i><b>7.1.7</b> ul</a></li>
<li class="chapter" data-level="7.1.8" data-path="html-group.html"><a href="html-group.html#li"><i class="fa fa-check"></i><b>7.1.8</b> li</a></li>
<li class="chapter" data-level="7.1.9" data-path="html-group.html"><a href="html-group.html#dl"><i class="fa fa-check"></i><b>7.1.9</b> dl</a></li>
<li class="chapter" data-level="7.1.10" data-path="html-group.html"><a href="html-group.html#dt"><i class="fa fa-check"></i><b>7.1.10</b> dt</a></li>
<li class="chapter" data-level="7.1.11" data-path="html-group.html"><a href="html-group.html#dd"><i class="fa fa-check"></i><b>7.1.11</b> dd</a></li>
<li class="chapter" data-level="7.1.12" data-path="html-group.html"><a href="html-group.html#figure"><i class="fa fa-check"></i><b>7.1.12</b> figure</a></li>
<li class="chapter" data-level="7.1.13" data-path="html-group.html"><a href="html-group.html#figcaption"><i class="fa fa-check"></i><b>7.1.13</b> figcaption</a></li>
<li class="chapter" data-level="7.1.14" data-path="html-group.html"><a href="html-group.html#main"><i class="fa fa-check"></i><b>7.1.14</b> main</a></li>
<li class="chapter" data-level="7.1.15" data-path="html-group.html"><a href="html-group.html#div"><i class="fa fa-check"></i><b>7.1.15</b> div</a></li>
</ul></li>
<li class="chapter" data-level="7.2" data-path="html-group.html"><a href="html-group.html#扩展阅读资料-4"><i class="fa fa-check"></i><b>7.2</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="html-text.html"><a href="html-text.html"><i class="fa fa-check"></i><b>8</b> 文本语义元素</a><ul>
<li class="chapter" data-level="8.1" data-path="html-text.html"><a href="html-text.html#a"><i class="fa fa-check"></i><b>8.1</b> a</a></li>
<li class="chapter" data-level="8.2" data-path="html-text.html"><a href="html-text.html#em"><i class="fa fa-check"></i><b>8.2</b> em</a></li>
<li class="chapter" data-level="8.3" data-path="html-text.html"><a href="html-text.html#strong"><i class="fa fa-check"></i><b>8.3</b> strong</a></li>
<li class="chapter" data-level="8.4" data-path="html-text.html"><a href="html-text.html#small"><i class="fa fa-check"></i><b>8.4</b> small</a></li>
<li class="chapter" data-level="8.5" data-path="html-text.html"><a href="html-text.html#s"><i class="fa fa-check"></i><b>8.5</b> s</a></li>
<li class="chapter" data-level="8.6" data-path="html-text.html"><a href="html-text.html#cite"><i class="fa fa-check"></i><b>8.6</b> cite</a></li>
<li class="chapter" data-level="8.7" data-path="html-text.html"><a href="html-text.html#q"><i class="fa fa-check"></i><b>8.7</b> q</a></li>
<li class="chapter" data-level="8.8" data-path="html-text.html"><a href="html-text.html#dfn"><i class="fa fa-check"></i><b>8.8</b> dfn</a></li>
<li class="chapter" data-level="8.9" data-path="html-text.html"><a href="html-text.html#abbr"><i class="fa fa-check"></i><b>8.9</b> abbr</a></li>
<li class="chapter" data-level="8.10" data-path="html-text.html"><a href="html-text.html#data"><i class="fa fa-check"></i><b>8.10</b> data</a></li>
<li class="chapter" data-level="8.11" data-path="html-text.html"><a href="html-text.html#time"><i class="fa fa-check"></i><b>8.11</b> time</a></li>
<li class="chapter" data-level="8.12" data-path="html-text.html"><a href="html-text.html#code"><i class="fa fa-check"></i><b>8.12</b> code</a></li>
<li class="chapter" data-level="8.13" data-path="html-text.html"><a href="html-text.html#var"><i class="fa fa-check"></i><b>8.13</b> var</a></li>
<li class="chapter" data-level="8.14" data-path="html-text.html"><a href="html-text.html#samp"><i class="fa fa-check"></i><b>8.14</b> samp</a></li>
<li class="chapter" data-level="8.15" data-path="html-text.html"><a href="html-text.html#kbd"><i class="fa fa-check"></i><b>8.15</b> kbd</a></li>
<li class="chapter" data-level="8.16" data-path="html-text.html"><a href="html-text.html#sub-和-sup"><i class="fa fa-check"></i><b>8.16</b> sub 和 sup</a></li>
<li class="chapter" data-level="8.17" data-path="html-text.html"><a href="html-text.html#i"><i class="fa fa-check"></i><b>8.17</b> i</a></li>
<li class="chapter" data-level="8.18" data-path="html-text.html"><a href="html-text.html#b"><i class="fa fa-check"></i><b>8.18</b> b</a></li>
<li class="chapter" data-level="8.19" data-path="html-text.html"><a href="html-text.html#u"><i class="fa fa-check"></i><b>8.19</b> u</a></li>
<li class="chapter" data-level="8.20" data-path="html-text.html"><a href="html-text.html#mark"><i class="fa fa-check"></i><b>8.20</b> mark</a></li>
<li class="chapter" data-level="8.21" data-path="html-text.html"><a href="html-text.html#ruby"><i class="fa fa-check"></i><b>8.21</b> ruby</a></li>
<li class="chapter" data-level="8.22" data-path="html-text.html"><a href="html-text.html#span"><i class="fa fa-check"></i><b>8.22</b> span</a></li>
<li class="chapter" data-level="8.23" data-path="html-text.html"><a href="html-text.html#br"><i class="fa fa-check"></i><b>8.23</b> br</a></li>
<li class="chapter" data-level="8.24" data-path="html-text.html"><a href="html-text.html#扩展阅读资料-5"><i class="fa fa-check"></i><b>8.24</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="html-edit.html"><a href="html-edit.html"><i class="fa fa-check"></i><b>9</b> 编辑相关元素</a><ul>
<li class="chapter" data-level="9.1" data-path="html-edit.html"><a href="html-edit.html#ins"><i class="fa fa-check"></i><b>9.1</b> ins</a></li>
<li class="chapter" data-level="9.2" data-path="html-edit.html"><a href="html-edit.html#del"><i class="fa fa-check"></i><b>9.2</b> del</a></li>
<li class="chapter" data-level="9.3" data-path="html-edit.html"><a href="html-edit.html#扩展阅读资料-6"><i class="fa fa-check"></i><b>9.3</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="html-embed.html"><a href="html-embed.html"><i class="fa fa-check"></i><b>10</b> 嵌入内容元素</a><ul>
<li class="chapter" data-level="10.1" data-path="html-embed.html"><a href="html-embed.html#picture"><i class="fa fa-check"></i><b>10.1</b> picture</a></li>
<li class="chapter" data-level="10.2" data-path="html-embed.html"><a href="html-embed.html#img"><i class="fa fa-check"></i><b>10.2</b> img</a></li>
<li class="chapter" data-level="10.3" data-path="html-embed.html"><a href="html-embed.html#iframe"><i class="fa fa-check"></i><b>10.3</b> iframe</a></li>
<li class="chapter" data-level="10.4" data-path="html-embed.html"><a href="html-embed.html#embed"><i class="fa fa-check"></i><b>10.4</b> embed</a><ul>
<li class="chapter" data-level="10.4.1" data-path="html-embed.html"><a href="html-embed.html#嵌入-flash"><i class="fa fa-check"></i><b>10.4.1</b> 嵌入 flash</a></li>
<li class="chapter" data-level="10.4.2" data-path="html-embed.html"><a href="html-embed.html#嵌入视频平台的内容"><i class="fa fa-check"></i><b>10.4.2</b> 嵌入视频平台的内容</a></li>
</ul></li>
<li class="chapter" data-level="10.5" data-path="html-embed.html"><a href="html-embed.html#object"><i class="fa fa-check"></i><b>10.5</b> object</a></li>
<li class="chapter" data-level="10.6" data-path="html-embed.html"><a href="html-embed.html#video"><i class="fa fa-check"></i><b>10.6</b> video</a></li>
<li class="chapter" data-level="10.7" data-path="html-embed.html"><a href="html-embed.html#audio"><i class="fa fa-check"></i><b>10.7</b> audio</a><ul>
<li class="chapter" data-level="10.7.1" data-path="html-embed.html"><a href="html-embed.html#设置音频播放属性"><i class="fa fa-check"></i><b>10.7.1</b> 设置音频播放属性</a></li>
<li class="chapter" data-level="10.7.2" data-path="html-embed.html"><a href="html-embed.html#指定多种音频格式"><i class="fa fa-check"></i><b>10.7.2</b> 指定多种音频格式</a></li>
</ul></li>
<li class="chapter" data-level="10.8" data-path="html-embed.html"><a href="html-embed.html#source"><i class="fa fa-check"></i><b>10.8</b> source</a></li>
<li class="chapter" data-level="10.9" data-path="html-embed.html"><a href="html-embed.html#track"><i class="fa fa-check"></i><b>10.9</b> track</a></li>
<li class="chapter" data-level="10.10" data-path="html-embed.html"><a href="html-embed.html#map"><i class="fa fa-check"></i><b>10.10</b> map</a></li>
<li class="chapter" data-level="10.11" data-path="html-embed.html"><a href="html-embed.html#area"><i class="fa fa-check"></i><b>10.11</b> area</a></li>
<li class="chapter" data-level="10.12" data-path="html-embed.html"><a href="html-embed.html#math"><i class="fa fa-check"></i><b>10.12</b> math</a></li>
<li class="chapter" data-level="10.13" data-path="html-embed.html"><a href="html-embed.html#svg"><i class="fa fa-check"></i><b>10.13</b> svg</a></li>
<li class="chapter" data-level="10.14" data-path="html-embed.html"><a href="html-embed.html#扩展阅读资料-7"><i class="fa fa-check"></i><b>10.14</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="11" data-path="html-table.html"><a href="html-table.html"><i class="fa fa-check"></i><b>11</b> 表格元素</a><ul>
<li class="chapter" data-level="11.1" data-path="html-table.html"><a href="html-table.html#table"><i class="fa fa-check"></i><b>11.1</b> table</a></li>
<li class="chapter" data-level="11.2" data-path="html-table.html"><a href="html-table.html#caption"><i class="fa fa-check"></i><b>11.2</b> caption</a></li>
<li class="chapter" data-level="11.3" data-path="html-table.html"><a href="html-table.html#tbody"><i class="fa fa-check"></i><b>11.3</b> tbody</a></li>
<li class="chapter" data-level="11.4" data-path="html-table.html"><a href="html-table.html#thead"><i class="fa fa-check"></i><b>11.4</b> thead</a></li>
<li class="chapter" data-level="11.5" data-path="html-table.html"><a href="html-table.html#tfoot"><i class="fa fa-check"></i><b>11.5</b> tfoot</a></li>
<li class="chapter" data-level="11.6" data-path="html-table.html"><a href="html-table.html#tr"><i class="fa fa-check"></i><b>11.6</b> tr</a></li>
<li class="chapter" data-level="11.7" data-path="html-table.html"><a href="html-table.html#td"><i class="fa fa-check"></i><b>11.7</b> td</a></li>
<li class="chapter" data-level="11.8" data-path="html-table.html"><a href="html-table.html#th"><i class="fa fa-check"></i><b>11.8</b> th</a></li>
<li class="chapter" data-level="11.9" data-path="html-table.html"><a href="html-table.html#扩展阅读资料-8"><i class="fa fa-check"></i><b>11.9</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="12" data-path="html-form.html"><a href="html-form.html"><i class="fa fa-check"></i><b>12</b> 表单元素</a><ul>
<li class="chapter" data-level="12.1" data-path="html-form.html"><a href="html-form.html#form"><i class="fa fa-check"></i><b>12.1</b> form</a></li>
<li class="chapter" data-level="12.2" data-path="html-form.html"><a href="html-form.html#lable"><i class="fa fa-check"></i><b>12.2</b> lable</a></li>
<li class="chapter" data-level="12.3" data-path="html-form.html"><a href="html-form.html#input"><i class="fa fa-check"></i><b>12.3</b> input</a></li>
<li class="chapter" data-level="12.4" data-path="html-form.html"><a href="html-form.html#button"><i class="fa fa-check"></i><b>12.4</b> button</a></li>
<li class="chapter" data-level="12.5" data-path="html-form.html"><a href="html-form.html#select"><i class="fa fa-check"></i><b>12.5</b> select</a></li>
<li class="chapter" data-level="12.6" data-path="html-form.html"><a href="html-form.html#datalist"><i class="fa fa-check"></i><b>12.6</b> datalist</a></li>
<li class="chapter" data-level="12.7" data-path="html-form.html"><a href="html-form.html#optgroup"><i class="fa fa-check"></i><b>12.7</b> optgroup</a></li>
<li class="chapter" data-level="12.8" data-path="html-form.html"><a href="html-form.html#option"><i class="fa fa-check"></i><b>12.8</b> option</a></li>
<li class="chapter" data-level="12.9" data-path="html-form.html"><a href="html-form.html#textarea"><i class="fa fa-check"></i><b>12.9</b> textarea</a></li>
<li class="chapter" data-level="12.10" data-path="html-form.html"><a href="html-form.html#keygen"><i class="fa fa-check"></i><b>12.10</b> keygen</a></li>
<li class="chapter" data-level="12.11" data-path="html-form.html"><a href="html-form.html#output"><i class="fa fa-check"></i><b>12.11</b> output</a></li>
<li class="chapter" data-level="12.12" data-path="html-form.html"><a href="html-form.html#progress"><i class="fa fa-check"></i><b>12.12</b> progress</a></li>
<li class="chapter" data-level="12.13" data-path="html-form.html"><a href="html-form.html#meter"><i class="fa fa-check"></i><b>12.13</b> meter</a></li>
<li class="chapter" data-level="12.14" data-path="html-form.html"><a href="html-form.html#filedset"><i class="fa fa-check"></i><b>12.14</b> filedset</a></li>
<li class="chapter" data-level="12.15" data-path="html-form.html"><a href="html-form.html#legend"><i class="fa fa-check"></i><b>12.15</b> legend</a></li>
<li class="chapter" data-level="12.16" data-path="html-form.html"><a href="html-form.html#扩展阅读资料-9"><i class="fa fa-check"></i><b>12.16</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="13" data-path="html-script.html"><a href="html-script.html"><i class="fa fa-check"></i><b>13</b> 脚本元素</a><ul>
<li class="chapter" data-level="13.1" data-path="html-script.html"><a href="html-script.html#script"><i class="fa fa-check"></i><b>13.1</b> script</a></li>
<li class="chapter" data-level="13.2" data-path="html-script.html"><a href="html-script.html#noscript"><i class="fa fa-check"></i><b>13.2</b> noscript</a></li>
<li class="chapter" data-level="13.3" data-path="html-script.html"><a href="html-script.html#template"><i class="fa fa-check"></i><b>13.3</b> template</a></li>
<li class="chapter" data-level="13.4" data-path="html-script.html"><a href="html-script.html#canvas"><i class="fa fa-check"></i><b>13.4</b> canvas</a></li>
<li class="chapter" data-level="13.5" data-path="html-script.html"><a href="html-script.html#扩展阅读资料-10"><i class="fa fa-check"></i><b>13.5</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="14" data-path="html-知识整理.html"><a href="html-知识整理.html"><i class="fa fa-check"></i><b>14</b> HTML 知识整理</a><ul>
<li class="chapter" data-level="14.1" data-path="html-知识整理.html"><a href="html-知识整理.html#html-nest"><i class="fa fa-check"></i><b>14.1</b> 嵌套规则</a></li>
</ul></li>
<li class="part"><span><b>II CSS</b></span></li>
<li class="chapter" data-level="15" data-path="css-intro.html"><a href="css-intro.html"><i class="fa fa-check"></i><b>15</b> CSS 简介及学习资源</a><ul>
<li class="chapter" data-level="15.1" data-path="css-intro.html"><a href="css-intro.html#使用样式表的三种方式"><i class="fa fa-check"></i><b>15.1</b> 使用样式表的三种方式</a><ul>
<li class="chapter" data-level="15.1.1" data-path="css-intro.html"><a href="css-intro.html#外部样式表"><i class="fa fa-check"></i><b>15.1.1</b> 外部样式表</a></li>
<li class="chapter" data-level="15.1.2" data-path="css-intro.html"><a href="css-intro.html#内部样式表"><i class="fa fa-check"></i><b>15.1.2</b> 内部样式表</a></li>
<li class="chapter" data-level="15.1.3" data-path="css-intro.html"><a href="css-intro.html#内嵌样式表"><i class="fa fa-check"></i><b>15.1.3</b> 内嵌样式表</a></li>
</ul></li>
<li class="chapter" data-level="15.2" data-path="css-intro.html"><a href="css-intro.html#在线学习资源及工具-1"><i class="fa fa-check"></i><b>15.2</b> 在线学习资源及工具</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="css-statement.html"><a href="css-statement.html"><i class="fa fa-check"></i><b>16</b> CSS 语法与规则</a><ul>
<li class="chapter" data-level="16.1" data-path="css-statement.html"><a href="css-statement.html#语法声明"><i class="fa fa-check"></i><b>16.1</b> 语法声明</a><ul>
<li class="chapter" data-level="16.1.1" data-path="css-statement.html"><a href="css-statement.html#at-规则"><i class="fa fa-check"></i><b>16.1.1</b> at 规则</a></li>
<li class="chapter" data-level="16.1.2" data-path="css-statement.html"><a href="css-statement.html#规则集"><i class="fa fa-check"></i><b>16.1.2</b> 规则集</a></li>
</ul></li>
<li class="chapter" data-level="16.2" data-path="css-statement.html"><a href="css-statement.html#css-注释"><i class="fa fa-check"></i><b>16.2</b> CSS 注释</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="css-selector.html"><a href="css-selector.html"><i class="fa fa-check"></i><b>17</b> CSS 选择符</a><ul>
<li class="chapter" data-level="17.1" data-path="css-selector.html"><a href="css-selector.html#简单选择符"><i class="fa fa-check"></i><b>17.1</b> 简单选择符</a><ul>
<li class="chapter" data-level="17.1.1" data-path="css-selector.html"><a href="css-selector.html#类型选择符"><i class="fa fa-check"></i><b>17.1.1</b> 类型选择符</a></li>
<li class="chapter" data-level="17.1.2" data-path="css-selector.html"><a href="css-selector.html#通配选择符"><i class="fa fa-check"></i><b>17.1.2</b> 通配选择符</a></li>
<li class="chapter" data-level="17.1.3" data-path="css-selector.html"><a href="css-selector.html#属性选择符"><i class="fa fa-check"></i><b>17.1.3</b> 属性选择符</a></li>
<li class="chapter" data-level="17.1.4" data-path="css-selector.html"><a href="css-selector.html#类选择符"><i class="fa fa-check"></i><b>17.1.4</b> 类选择符</a></li>
<li class="chapter" data-level="17.1.5" data-path="css-selector.html"><a href="css-selector.html#id-选择符"><i class="fa fa-check"></i><b>17.1.5</b> ID 选择符</a></li>
<li class="chapter" data-level="17.1.6" data-path="css-selector.html"><a href="css-selector.html#简单选择符之伪类选择符"><i class="fa fa-check"></i><b>17.1.6</b> 简单选择符之伪类选择符</a></li>
</ul></li>
<li class="chapter" data-level="17.2" data-path="css-selector.html"><a href="css-selector.html#伪元素选择符"><i class="fa fa-check"></i><b>17.2</b> 伪元素选择符</a></li>
<li class="chapter" data-level="17.3" data-path="css-selector.html"><a href="css-selector.html#组合选择符"><i class="fa fa-check"></i><b>17.3</b> 组合选择符</a><ul>
<li class="chapter" data-level="17.3.1" data-path="css-selector.html"><a href="css-selector.html#后代选择符"><i class="fa fa-check"></i><b>17.3.1</b> 后代选择符</a></li>
<li class="chapter" data-level="17.3.2" data-path="css-selector.html"><a href="css-selector.html#子元素选择符"><i class="fa fa-check"></i><b>17.3.2</b> 子元素选择符</a></li>
<li class="chapter" data-level="17.3.3" data-path="css-selector.html"><a href="css-selector.html#相邻选择符"><i class="fa fa-check"></i><b>17.3.3</b> 相邻选择符</a></li>
<li class="chapter" data-level="17.3.4" data-path="css-selector.html"><a href="css-selector.html#兄弟选择符"><i class="fa fa-check"></i><b>17.3.4</b> 兄弟选择符</a></li>
</ul></li>
<li class="chapter" data-level="17.4" data-path="css-selector.html"><a href="css-selector.html#群组选择符"><i class="fa fa-check"></i><b>17.4</b> 群组选择符</a></li>
<li class="chapter" data-level="17.5" data-path="css-selector.html"><a href="css-selector.html#参考资料"><i class="fa fa-check"></i><b>17.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="18" data-path="css-cascade.html"><a href="css-cascade.html"><i class="fa fa-check"></i><b>18</b> 样式级联</a><ul>
<li class="chapter" data-level="18.1" data-path="css-cascade.html"><a href="css-cascade.html#级联顺序"><i class="fa fa-check"></i><b>18.1</b> 级联顺序</a></li>
<li class="chapter" data-level="18.2" data-path="css-cascade.html"><a href="css-cascade.html#important-规则"><i class="fa fa-check"></i><b>18.2</b> !important 规则</a></li>
<li class="chapter" data-level="18.3" data-path="css-cascade.html"><a href="css-cascade.html#选择符优先级别"><i class="fa fa-check"></i><b>18.3</b> 选择符优先级别</a></li>
<li class="chapter" data-level="18.4" data-path="css-cascade.html"><a href="css-cascade.html#扩展阅读资料-11"><i class="fa fa-check"></i><b>18.4</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="19" data-path="css-unit.html"><a href="css-unit.html"><i class="fa fa-check"></i><b>19</b> CSS 的取值</a><ul>
<li class="chapter" data-level="19.1" data-path="css-unit.html"><a href="css-unit.html#长度"><i class="fa fa-check"></i><b>19.1</b> 长度</a><ul>
<li class="chapter" data-level="19.1.1" data-path="css-unit.html"><a href="css-unit.html#文本相对长度"><i class="fa fa-check"></i><b>19.1.1</b> 文本相对长度</a></li>
<li class="chapter" data-level="19.1.2" data-path="css-unit.html"><a href="css-unit.html#视图窗口相对长度"><i class="fa fa-check"></i><b>19.1.2</b> 视图窗口相对长度</a></li>
</ul></li>
<li class="chapter" data-level="19.2" data-path="css-unit.html"><a href="css-unit.html#角度"><i class="fa fa-check"></i><b>19.2</b> 角度</a></li>
<li class="chapter" data-level="19.3" data-path="css-unit.html"><a href="css-unit.html#时间"><i class="fa fa-check"></i><b>19.3</b> 时间</a></li>
<li class="chapter" data-level="19.4" data-path="css-unit.html"><a href="css-unit.html#频率"><i class="fa fa-check"></i><b>19.4</b> 频率</a></li>
<li class="chapter" data-level="19.5" data-path="css-unit.html"><a href="css-unit.html#布局"><i class="fa fa-check"></i><b>19.5</b> 布局</a></li>
<li class="chapter" data-level="19.6" data-path="css-unit.html"><a href="css-unit.html#颜色"><i class="fa fa-check"></i><b>19.6</b> 颜色</a></li>
<li class="chapter" data-level="19.7" data-path="css-unit.html"><a href="css-unit.html#数字"><i class="fa fa-check"></i><b>19.7</b> 数字</a><ul>
<li class="chapter" data-level="19.7.1" data-path="css-unit.html"><a href="css-unit.html#section-1"><i class="fa fa-check"></i><b>19.7.1</b> <number></a></li>
<li class="chapter" data-level="19.7.2" data-path="css-unit.html"><a href="css-unit.html#section-2"><i class="fa fa-check"></i><b>19.7.2</b> <integer></a></li>
<li class="chapter" data-level="19.7.3" data-path="css-unit.html"><a href="css-unit.html#section-3"><i class="fa fa-check"></i><b>19.7.3</b> <percentage></a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="20" data-path="css-text.html"><a href="css-text.html"><i class="fa fa-check"></i><b>20</b> 文本样式属性</a><ul>
<li class="chapter" data-level="20.1" data-path="css-text.html"><a href="css-text.html#设定字体"><i class="fa fa-check"></i><b>20.1</b> 设定字体</a></li>
<li class="chapter" data-level="20.2" data-path="css-text.html"><a href="css-text.html#创建斜体"><i class="fa fa-check"></i><b>20.2</b> 创建斜体</a></li>
<li class="chapter" data-level="20.3" data-path="css-text.html"><a href="css-text.html#应用粗体"><i class="fa fa-check"></i><b>20.3</b> 应用粗体</a></li>
<li class="chapter" data-level="20.4" data-path="css-text.html"><a href="css-text.html#设置字体大小"><i class="fa fa-check"></i><b>20.4</b> 设置字体大小</a></li>
<li class="chapter" data-level="20.5" data-path="css-text.html"><a href="css-text.html#设置行间距"><i class="fa fa-check"></i><b>20.5</b> 设置行间距</a></li>
<li class="chapter" data-level="20.6" data-path="css-text.html"><a href="css-text.html#同时设置所有字体值"><i class="fa fa-check"></i><b>20.6</b> 同时设置所有字体值</a></li>
<li class="chapter" data-level="20.7" data-path="css-text.html"><a href="css-text.html#设置字体颜色"><i class="fa fa-check"></i><b>20.7</b> 设置字体颜色</a></li>
<li class="chapter" data-level="20.8" data-path="css-text.html"><a href="css-text.html#控制字符间距"><i class="fa fa-check"></i><b>20.8</b> 控制字符间距</a></li>
<li class="chapter" data-level="20.9" data-path="css-text.html"><a href="css-text.html#首行缩进"><i class="fa fa-check"></i><b>20.9</b> 首行缩进</a></li>
<li class="chapter" data-level="20.10" data-path="css-text.html"><a href="css-text.html#文本对齐"><i class="fa fa-check"></i><b>20.10</b> 文本对齐</a></li>
<li class="chapter" data-level="20.11" data-path="css-text.html"><a href="css-text.html#文本装饰"><i class="fa fa-check"></i><b>20.11</b> 文本装饰</a></li>
<li class="chapter" data-level="20.12" data-path="css-text.html"><a href="css-text.html#其他文本样式"><i class="fa fa-check"></i><b>20.12</b> 其他文本样式</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="css-background.html"><a href="css-background.html"><i class="fa fa-check"></i><b>21</b> 背景</a><ul>
<li class="chapter" data-level="21.1" data-path="css-background.html"><a href="css-background.html#设置背景色"><i class="fa fa-check"></i><b>21.1</b> 设置背景色</a></li>
<li class="chapter" data-level="21.2" data-path="css-background.html"><a href="css-background.html#设置背景图片"><i class="fa fa-check"></i><b>21.2</b> 设置背景图片</a></li>
<li class="chapter" data-level="21.3" data-path="css-background.html"><a href="css-background.html#设置线性渐变背景"><i class="fa fa-check"></i><b>21.3</b> 设置线性渐变背景</a></li>
<li class="chapter" data-level="21.4" data-path="css-background.html"><a href="css-background.html#设置径向渐变"><i class="fa fa-check"></i><b>21.4</b> 设置径向渐变</a></li>
<li class="chapter" data-level="21.5" data-path="css-background.html"><a href="css-background.html#使用多个色标"><i class="fa fa-check"></i><b>21.5</b> 使用多个色标</a></li>
</ul></li>
<li class="chapter" data-level="22" data-path="css-box.html"><a href="css-box.html"><i class="fa fa-check"></i><b>22</b> 盒模型</a><ul>
<li class="chapter" data-level="22.1" data-path="css-box.html"><a href="css-box.html#盒模型的概念"><i class="fa fa-check"></i><b>22.1</b> 盒模型的概念</a></li>
<li class="chapter" data-level="22.2" data-path="css-box.html"><a href="css-box.html#设置盒子大小"><i class="fa fa-check"></i><b>22.2</b> 设置盒子大小</a></li>
<li class="chapter" data-level="22.3" data-path="css-box.html"><a href="css-box.html#设置外边距"><i class="fa fa-check"></i><b>22.3</b> 设置外边距</a></li>
<li class="chapter" data-level="22.4" data-path="css-box.html"><a href="css-box.html#设定内边距"><i class="fa fa-check"></i><b>22.4</b> 设定内边距</a></li>
<li class="chapter" data-level="22.5" data-path="css-box.html"><a href="css-box.html#设置边框"><i class="fa fa-check"></i><b>22.5</b> 设置边框</a></li>
<li class="chapter" data-level="22.6" data-path="css-box.html"><a href="css-box.html#圆角"><i class="fa fa-check"></i><b>22.6</b> 圆角</a></li>
<li class="chapter" data-level="22.7" data-path="css-box.html"><a href="css-box.html#外边距叠加"><i class="fa fa-check"></i><b>22.7</b> 外边距叠加</a><ul>
<li class="chapter" data-level="22.7.1" data-path="css-box.html"><a href="css-box.html#什么时候会发生外边距叠加"><i class="fa fa-check"></i><b>22.7.1</b> 什么时候会发生外边距叠加</a></li>
<li class="chapter" data-level="22.7.2" data-path="css-box.html"><a href="css-box.html#如何避免外边距叠加"><i class="fa fa-check"></i><b>22.7.2</b> 如何避免外边距叠加</a></li>
</ul></li>
<li class="chapter" data-level="22.8" data-path="css-box.html"><a href="css-box.html#参考资料-1"><i class="fa fa-check"></i><b>22.8</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="css-position.html"><a href="css-position.html"><i class="fa fa-check"></i><b>23</b> 定位及布局</a><ul>
<li class="chapter" data-level="23.1" data-path="css-position.html"><a href="css-position.html#信息流"><i class="fa fa-check"></i><b>23.1</b> 信息流</a></li>
<li class="chapter" data-level="23.2" data-path="css-position.html"><a href="css-position.html#display"><i class="fa fa-check"></i><b>23.2</b> display</a></li>
<li class="chapter" data-level="23.3" data-path="css-position.html"><a href="css-position.html#浮动"><i class="fa fa-check"></i><b>23.3</b> 浮动</a></li>
<li class="chapter" data-level="23.4" data-path="css-position.html"><a href="css-position.html#清除浮动"><i class="fa fa-check"></i><b>23.4</b> 清除浮动</a></li>
<li class="chapter" data-level="23.5" data-path="css-position.html"><a href="css-position.html#position"><i class="fa fa-check"></i><b>23.5</b> position</a></li>
<li class="chapter" data-level="23.6" data-path="css-position.html"><a href="css-position.html#toprightbottomleft"><i class="fa fa-check"></i><b>23.6</b> top、right、bottom、left</a></li>
<li class="chapter" data-level="23.7" data-path="css-position.html"><a href="css-position.html#clip"><i class="fa fa-check"></i><b>23.7</b> clip</a></li>
<li class="chapter" data-level="23.8" data-path="css-position.html"><a href="css-position.html#z-index"><i class="fa fa-check"></i><b>23.8</b> z-index</a></li>
<li class="chapter" data-level="23.9" data-path="css-position.html"><a href="css-position.html#css-中的居中"><i class="fa fa-check"></i><b>23.9</b> CSS 中的居中</a></li>
</ul></li>
<li class="chapter" data-level="24" data-path="css-transform.html"><a href="css-transform.html"><i class="fa fa-check"></i><b>24</b> CSS 变形</a><ul>
<li class="chapter" data-level="24.1" data-path="css-transform.html"><a href="css-transform.html#css-变形的语法"><i class="fa fa-check"></i><b>24.1</b> CSS 变形的语法</a></li>
<li class="chapter" data-level="24.2" data-path="css-transform.html"><a href="css-transform.html#d-变形"><i class="fa fa-check"></i><b>24.2</b> 2D 变形</a><ul>
<li class="chapter" data-level="24.2.1" data-path="css-transform.html"><a href="css-transform.html#d-旋转"><i class="fa fa-check"></i><b>24.2.1</b> 2D 旋转</a></li>
</ul></li>
<li class="chapter" data-level="24.3" data-path="css-transform.html"><a href="css-transform.html#d-缩放"><i class="fa fa-check"></i><b>24.3</b> 2D 缩放</a></li>
<li class="chapter" data-level="24.4" data-path="css-transform.html"><a href="css-transform.html#d-位移"><i class="fa fa-check"></i><b>24.4</b> 2D 位移</a></li>
<li class="chapter" data-level="24.5" data-path="css-transform.html"><a href="css-transform.html#d-倾斜"><i class="fa fa-check"></i><b>24.5</b> 2D 倾斜</a></li>
<li class="chapter" data-level="24.6" data-path="css-transform.html"><a href="css-transform.html#变形组合"><i class="fa fa-check"></i><b>24.6</b> 变形组合</a></li>
<li class="chapter" data-level="24.7" data-path="css-transform.html"><a href="css-transform.html#设置变形的原点"><i class="fa fa-check"></i><b>24.7</b> 设置变形的原点</a></li>
<li class="chapter" data-level="24.8" data-path="css-transform.html"><a href="css-transform.html#透视"><i class="fa fa-check"></i><b>24.8</b> 透视</a></li>
<li class="chapter" data-level="24.9" data-path="css-transform.html"><a href="css-transform.html#d-旋转-1"><i class="fa fa-check"></i><b>24.9</b> 3D 旋转</a></li>
<li class="chapter" data-level="24.10" data-path="css-transform.html"><a href="css-transform.html#d-缩放-1"><i class="fa fa-check"></i><b>24.10</b> 3D 缩放</a></li>
<li class="chapter" data-level="24.11" data-path="css-transform.html"><a href="css-transform.html#d-位移-1"><i class="fa fa-check"></i><b>24.11</b> 3D 位移</a></li>
<li class="chapter" data-level="24.12" data-path="css-transform.html"><a href="css-transform.html#变形风格"><i class="fa fa-check"></i><b>24.12</b> 变形风格</a></li>
<li class="chapter" data-level="24.13" data-path="css-transform.html"><a href="css-transform.html#背部可见性"><i class="fa fa-check"></i><b>24.13</b> 背部可见性</a></li>
</ul></li>
<li class="chapter" data-level="25" data-path="css-animate.html"><a href="css-animate.html"><i class="fa fa-check"></i><b>25</b> CSS 过渡及动画</a><ul>
<li class="chapter" data-level="25.1" data-path="css-animate.html"><a href="css-animate.html#过渡"><i class="fa fa-check"></i><b>25.1</b> 过渡</a><ul>
<li class="chapter" data-level="25.1.1" data-path="css-animate.html"><a href="css-animate.html#过渡属性"><i class="fa fa-check"></i><b>25.1.1</b> 过渡属性</a></li>
</ul></li>
<li class="chapter" data-level="25.2" data-path="css-animate.html"><a href="css-animate.html#过渡效果持续时间"><i class="fa fa-check"></i><b>25.2</b> 过渡效果持续时间</a></li>
<li class="chapter" data-level="25.3" data-path="css-animate.html"><a href="css-animate.html#过渡的缓动效果设置"><i class="fa fa-check"></i><b>25.3</b> 过渡的缓动效果设置</a></li>
<li class="chapter" data-level="25.4" data-path="css-animate.html"><a href="css-animate.html#过渡效果的延迟设置"><i class="fa fa-check"></i><b>25.4</b> 过渡效果的延迟设置</a></li>
<li class="chapter" data-level="25.5" data-path="css-animate.html"><a href="css-animate.html#过渡效果的简写"><i class="fa fa-check"></i><b>25.5</b> 过渡效果的简写</a></li>
<li class="chapter" data-level="25.6" data-path="css-animate.html"><a href="css-animate.html#变形和过渡的结合"><i class="fa fa-check"></i><b>25.6</b> 变形和过渡的结合</a></li>
<li class="chapter" data-level="25.7" data-path="css-animate.html"><a href="css-animate.html#动画"><i class="fa fa-check"></i><b>25.7</b> 动画</a><ul>
<li class="chapter" data-level="25.7.1" data-path="css-animate.html"><a href="css-animate.html#关键帧"><i class="fa fa-check"></i><b>25.7.1</b> 关键帧</a></li>
<li class="chapter" data-level="25.7.2" data-path="css-animate.html"><a href="css-animate.html#动画名称"><i class="fa fa-check"></i><b>25.7.2</b> 动画名称</a></li>
<li class="chapter" data-level="25.7.3" data-path="css-animate.html"><a href="css-animate.html#动画持续时间缓动效果及延迟"><i class="fa fa-check"></i><b>25.7.3</b> 动画持续时间、缓动效果及延迟</a></li>
<li class="chapter" data-level="25.7.4" data-path="css-animate.html"><a href="css-animate.html#动画重复次数"><i class="fa fa-check"></i><b>25.7.4</b> 动画重复次数</a></li>
<li class="chapter" data-level="25.7.5" data-path="css-animate.html"><a href="css-animate.html#动画方向"><i class="fa fa-check"></i><b>25.7.5</b> 动画方向</a></li>
<li class="chapter" data-level="25.7.6" data-path="css-animate.html"><a href="css-animate.html#动画运行状态"><i class="fa fa-check"></i><b>25.7.6</b> 动画运行状态</a></li>
<li class="chapter" data-level="25.7.7" data-path="css-animate.html"><a href="css-animate.html#动画填充模式"><i class="fa fa-check"></i><b>25.7.7</b> 动画填充模式</a></li>
<li class="chapter" data-level="25.7.8" data-path="css-animate.html"><a href="css-animate.html#动画属性简写"><i class="fa fa-check"></i><b>25.7.8</b> 动画属性简写</a></li>
</ul></li>
<li class="chapter" data-level="25.8" data-path="css-animate.html"><a href="css-animate.html#动画库-animate.css-的使用"><i class="fa fa-check"></i><b>25.8</b> 动画库 animate.css 的使用</a></li>
</ul></li>
<li class="chapter" data-level="26" data-path="flexbox.html"><a href="flexbox.html"><i class="fa fa-check"></i><b>26</b> Flexbox</a><ul>
<li class="chapter" data-level="26.1" data-path="flexbox.html"><a href="flexbox.html#基本概念"><i class="fa fa-check"></i><b>26.1</b> 基本概念</a><ul>
<li class="chapter" data-level="26.1.1" data-path="flexbox.html"><a href="flexbox.html#几个术语"><i class="fa fa-check"></i><b>26.1.1</b> 几个术语</a></li>
</ul></li>
<li class="chapter" data-level="26.2" data-path="flexbox.html"><a href="flexbox.html#flexbox容器的构造方法"><i class="fa fa-check"></i><b>26.2</b> Flexbox容器的构造方法</a></li>
<li class="chapter" data-level="26.3" data-path="flexbox.html"><a href="flexbox.html#flexbox容器特性"><i class="fa fa-check"></i><b>26.3</b> Flexbox容器特性</a><ul>
<li class="chapter" data-level="26.3.1" data-path="flexbox.html"><a href="flexbox.html#flex-direction属性"><i class="fa fa-check"></i><b>26.3.1</b> flex-direction属性</a></li>
<li class="chapter" data-level="26.3.2" data-path="flexbox.html"><a href="flexbox.html#flex-wrap属性"><i class="fa fa-check"></i><b>26.3.2</b> flex-wrap属性</a></li>
<li class="chapter" data-level="26.3.3" data-path="flexbox.html"><a href="flexbox.html#flex-flow属性"><i class="fa fa-check"></i><b>26.3.3</b> flex-flow属性</a></li>
<li class="chapter" data-level="26.3.4" data-path="flexbox.html"><a href="flexbox.html#justify-content属性"><i class="fa fa-check"></i><b>26.3.4</b> justify-content属性</a></li>
<li class="chapter" data-level="26.3.5" data-path="flexbox.html"><a href="flexbox.html#align-items属性"><i class="fa fa-check"></i><b>26.3.5</b> align-items属性</a></li>
<li class="chapter" data-level="26.3.6" data-path="flexbox.html"><a href="flexbox.html#align-content属性"><i class="fa fa-check"></i><b>26.3.6</b> align-content属性</a></li>
</ul></li>
<li class="chapter" data-level="26.4" data-path="flexbox.html"><a href="flexbox.html#flexbox项目特性"><i class="fa fa-check"></i><b>26.4</b> Flexbox项目特性</a><ul>
<li class="chapter" data-level="26.4.1" data-path="flexbox.html"><a href="flexbox.html#order属性"><i class="fa fa-check"></i><b>26.4.1</b> order属性</a></li>
<li class="chapter" data-level="26.4.2" data-path="flexbox.html"><a href="flexbox.html#flex-grow属性"><i class="fa fa-check"></i><b>26.4.2</b> flex-grow属性</a></li>
<li class="chapter" data-level="26.4.3" data-path="flexbox.html"><a href="flexbox.html#flex-shrink属性"><i class="fa fa-check"></i><b>26.4.3</b> flex-shrink属性</a></li>
<li class="chapter" data-level="26.4.4" data-path="flexbox.html"><a href="flexbox.html#flex-basis属性"><i class="fa fa-check"></i><b>26.4.4</b> flex-basis属性</a></li>
<li class="chapter" data-level="26.4.5" data-path="flexbox.html"><a href="flexbox.html#flex属性"><i class="fa fa-check"></i><b>26.4.5</b> flex属性</a></li>
<li class="chapter" data-level="26.4.6" data-path="flexbox.html"><a href="flexbox.html#align-self属性"><i class="fa fa-check"></i><b>26.4.6</b> align-self属性</a></li>
</ul></li>
<li class="chapter" data-level="26.5" data-path="flexbox.html"><a href="flexbox.html#参考资料-2"><i class="fa fa-check"></i><b>26.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="27" data-path="css-layout.html"><a href="css-layout.html"><i class="fa fa-check"></i><b>27</b> CSS layout</a><ul>
<li class="chapter" data-level="27.1" data-path="css-layout.html"><a href="css-layout.html#分栏布局"><i class="fa fa-check"></i><b>27.1</b> 分栏布局</a></li>
<li class="chapter" data-level="27.2" data-path="css-layout.html"><a href="css-layout.html#网格布局"><i class="fa fa-check"></i><b>27.2</b> 网格布局</a><ul>
<li class="chapter" data-level="27.2.1" data-path="css-layout.html"><a href="css-layout.html#指定列的数量"><i class="fa fa-check"></i><b>27.2.1</b> 指定列的数量</a></li>
<li class="chapter" data-level="27.2.2" data-path="css-layout.html"><a href="css-layout.html#网格之间的间距"><i class="fa fa-check"></i><b>27.2.2</b> 网格之间的间距</a></li>
<li class="chapter" data-level="27.2.3" data-path="css-layout.html"><a href="css-layout.html#网格的大小"><i class="fa fa-check"></i><b>27.2.3</b> 网格的大小</a></li>
<li class="chapter" data-level="27.2.4" data-path="css-layout.html"><a href="css-layout.html#基于行的位置设置"><i class="fa fa-check"></i><b>27.2.4</b> 基于行的位置设置</a></li>
<li class="chapter" data-level="27.2.5" data-path="css-layout.html"><a href="css-layout.html#网格模板区域"><i class="fa fa-check"></i><b>27.2.5</b> 网格模板区域</a></li>
</ul></li>
<li class="chapter" data-level="27.3" data-path="css-layout.html"><a href="css-layout.html#参考资料-3"><i class="fa fa-check"></i><b>27.3</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>III JavaScript</b></span></li>
<li class="chapter" data-level="28" data-path="javascript-1.html"><a href="javascript-1.html"><i class="fa fa-check"></i><b>28</b> JavaScript</a><ul>
<li class="chapter" data-level="28.1" data-path="javascript-1.html"><a href="javascript-1.html#javascript-简介"><i class="fa fa-check"></i><b>28.1</b> JavaScript 简介</a><ul>
<li class="chapter" data-level="28.1.1" data-path="javascript-1.html"><a href="javascript-1.html#javascript-的特点"><i class="fa fa-check"></i><b>28.1.1</b> JavaScript 的特点</a></li>
<li class="chapter" data-level="28.1.2" data-path="javascript-1.html"><a href="javascript-1.html#javascript-的用途"><i class="fa fa-check"></i><b>28.1.2</b> JavaScript 的用途</a></li>
</ul></li>
<li class="chapter" data-level="28.2" data-path="javascript-1.html"><a href="javascript-1.html#javascript-开发环境"><i class="fa fa-check"></i><b>28.2</b> JavaScript 开发环境</a></li>
<li class="chapter" data-level="28.3" data-path="javascript-1.html"><a href="javascript-1.html#javascript-语言的发展趋势"><i class="fa fa-check"></i><b>28.3</b> Javascript 语言的发展趋势</a></li>
<li class="chapter" data-level="28.4" data-path="javascript-1.html"><a href="javascript-1.html#javascript-学习资源"><i class="fa fa-check"></i><b>28.4</b> JavaScript 学习资源</a></li>
</ul></li>
<li class="chapter" data-level="29" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html"><i class="fa fa-check"></i><b>29</b> 在网页中使用 JavaScript 的方法</a><ul>
<li class="chapter" data-level="29.1" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#嵌入式"><i class="fa fa-check"></i><b>29.1</b> 嵌入式</a></li>
<li class="chapter" data-level="29.2" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#行内式"><i class="fa fa-check"></i><b>29.2</b> 行内式</a></li>
<li class="chapter" data-level="29.3" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#链接式"><i class="fa fa-check"></i><b>29.3</b> 链接式</a><ul>
<li class="chapter" data-level="29.3.1" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#延迟脚本-defer"><i class="fa fa-check"></i><b>29.3.1</b> 延迟脚本 defer</a></li>
<li class="chapter" data-level="29.3.2" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#异步脚本-async"><i class="fa fa-check"></i><b>29.3.2</b> 异步脚本 async</a></li>
</ul></li>
<li class="chapter" data-level="29.4" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#script-标签的位置"><i class="fa fa-check"></i><b>29.4</b> script 标签的位置</a></li>
<li class="chapter" data-level="29.5" data-path="在网页中使用-javascript-的方法.html"><a href="在网页中使用-javascript-的方法.html#阅读材料"><i class="fa fa-check"></i><b>29.5</b> 阅读材料</a></li>
</ul></li>
<li class="chapter" data-level="30" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html"><i class="fa fa-check"></i><b>30</b> JavaScript 核心语法</a><ul>
<li class="chapter" data-level="30.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#区分大小写"><i class="fa fa-check"></i><b>30.1</b> 区分大小写</a></li>
<li class="chapter" data-level="30.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#注释"><i class="fa fa-check"></i><b>30.2</b> 注释</a></li>
<li class="chapter" data-level="30.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#变量"><i class="fa fa-check"></i><b>30.3</b> 变量</a></li>
<li class="chapter" data-level="30.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#分号"><i class="fa fa-check"></i><b>30.4</b> 分号</a></li>
<li class="chapter" data-level="30.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#常量"><i class="fa fa-check"></i><b>30.5</b> 常量</a></li>
<li class="chapter" data-level="30.6" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#运算符"><i class="fa fa-check"></i><b>30.6</b> 运算符</a><ul>
<li class="chapter" data-level="30.6.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#算术运算符"><i class="fa fa-check"></i><b>30.6.1</b> 算术运算符</a></li>
<li class="chapter" data-level="30.6.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#关系运算符"><i class="fa fa-check"></i><b>30.6.2</b> 关系运算符</a></li>
<li class="chapter" data-level="30.6.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#赋值运算符"><i class="fa fa-check"></i><b>30.6.3</b> 赋值运算符</a></li>
<li class="chapter" data-level="30.6.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#逻辑运算符"><i class="fa fa-check"></i><b>30.6.4</b> 逻辑运算符</a></li>
<li class="chapter" data-level="30.6.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#连接运算符"><i class="fa fa-check"></i><b>30.6.5</b> 连接运算符</a></li>
</ul></li>
<li class="chapter" data-level="30.7" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#流程控制"><i class="fa fa-check"></i><b>30.7</b> 流程控制</a><ul>
<li class="chapter" data-level="30.7.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#语句块"><i class="fa fa-check"></i><b>30.7.1</b> 语句块</a></li>
<li class="chapter" data-level="30.7.2" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#break"><i class="fa fa-check"></i><b>30.7.2</b> break</a></li>
<li class="chapter" data-level="30.7.3" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#ifelse"><i class="fa fa-check"></i><b>30.7.3</b> if…else</a></li>
<li class="chapter" data-level="30.7.4" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#switch"><i class="fa fa-check"></i><b>30.7.4</b> switch</a></li>
<li class="chapter" data-level="30.7.5" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#for"><i class="fa fa-check"></i><b>30.7.5</b> for</a></li>
<li class="chapter" data-level="30.7.6" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#while"><i class="fa fa-check"></i><b>30.7.6</b> while</a></li>
<li class="chapter" data-level="30.7.7" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#dowhile"><i class="fa fa-check"></i><b>30.7.7</b> do…while</a></li>
</ul></li>
<li class="chapter" data-level="30.8" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#函数"><i class="fa fa-check"></i><b>30.8</b> 函数</a><ul>
<li class="chapter" data-level="30.8.1" data-path="javascript-核心语法.html"><a href="javascript-核心语法.html#回调函数"><i class="fa fa-check"></i><b>30.8.1</b> 回调函数</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="31" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html"><i class="fa fa-check"></i><b>31</b> Javascript中的表达式和运算符</a><ul>
<li class="chapter" data-level="31.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#主要表达式"><i class="fa fa-check"></i><b>31.1</b> 主要表达式</a><ul>
<li class="chapter" data-level="31.1.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#this"><i class="fa fa-check"></i><b>31.1.1</b> <code>this</code></a></li>
<li class="chapter" data-level="31.1.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#function"><i class="fa fa-check"></i><b>31.1.2</b> function</a></li>
<li class="chapter" data-level="31.1.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#class"><i class="fa fa-check"></i><b>31.1.3</b> class</a></li>
<li class="chapter" data-level="31.1.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#function-1"><i class="fa fa-check"></i><b>31.1.4</b> function*</a></li>
<li class="chapter" data-level="31.1.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#yield"><i class="fa fa-check"></i><b>31.1.5</b> yield</a></li>
<li class="chapter" data-level="31.1.6" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#yield-1"><i class="fa fa-check"></i><b>31.1.6</b> yield*</a></li>
<li class="chapter" data-level="31.1.7" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#async-function"><i class="fa fa-check"></i><b>31.1.7</b> async function*</a></li>
<li class="chapter" data-level="31.1.8" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#await"><i class="fa fa-check"></i><b>31.1.8</b> await</a></li>
<li class="chapter" data-level="31.1.9" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-4"><i class="fa fa-check"></i><b>31.1.9</b> []</a></li>
<li class="chapter" data-level="31.1.10" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-5"><i class="fa fa-check"></i><b>31.1.10</b> </a></li>
<li class="chapter" data-level="31.1.11" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#abci"><i class="fa fa-check"></i><b>31.1.11</b> /ab+c/i</a></li>
<li class="chapter" data-level="31.1.12" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#section-6"><i class="fa fa-check"></i><b>31.1.12</b> ( )</a></li>
</ul></li>
<li class="chapter" data-level="31.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#左表达式"><i class="fa fa-check"></i><b>31.2</b> 左表达式</a><ul>
<li class="chapter" data-level="31.2.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#属性访问符"><i class="fa fa-check"></i><b>31.2.1</b> 属性访问符</a></li>
<li class="chapter" data-level="31.2.2" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#new"><i class="fa fa-check"></i><b>31.2.2</b> new</a></li>
<li class="chapter" data-level="31.2.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#new.target"><i class="fa fa-check"></i><b>31.2.3</b> new.target</a></li>
<li class="chapter" data-level="31.2.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#super"><i class="fa fa-check"></i><b>31.2.4</b> super</a></li>
<li class="chapter" data-level="31.2.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#obj"><i class="fa fa-check"></i><b>31.2.5</b> …obj</a></li>
</ul></li>
<li class="chapter" data-level="31.3" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#自增和自减"><i class="fa fa-check"></i><b>31.3</b> 自增和自减</a></li>
<li class="chapter" data-level="31.4" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#一元运算符"><i class="fa fa-check"></i><b>31.4</b> 一元运算符</a><ul>
<li class="chapter" data-level="31.4.1" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#一元正号"><i class="fa fa-check"></i><b>31.4.1</b> 一元正号</a></li>
</ul></li>
<li class="chapter" data-level="31.5" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#算术运算符-1"><i class="fa fa-check"></i><b>31.5</b> 算术运算符</a></li>
<li class="chapter" data-level="31.6" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#关系运算符-1"><i class="fa fa-check"></i><b>31.6</b> 关系运算符</a></li>
<li class="chapter" data-level="31.7" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#相等运算符"><i class="fa fa-check"></i><b>31.7</b> 相等运算符</a></li>
<li class="chapter" data-level="31.8" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#位移运算符"><i class="fa fa-check"></i><b>31.8</b> 位移运算符</a></li>
<li class="chapter" data-level="31.9" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#二进制位运算符"><i class="fa fa-check"></i><b>31.9</b> 二进制位运算符</a></li>
<li class="chapter" data-level="31.10" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#二元逻辑运算符"><i class="fa fa-check"></i><b>31.10</b> 二元逻辑运算符</a></li>
<li class="chapter" data-level="31.11" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#条件三元运算符"><i class="fa fa-check"></i><b>31.11</b> 条件(三元)运算符</a></li>
<li class="chapter" data-level="31.12" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#赋值运算符-1"><i class="fa fa-check"></i><b>31.12</b> 赋值运算符</a></li>
<li class="chapter" data-level="31.13" data-path="javascript中的表达式和运算符.html"><a href="javascript中的表达式和运算符.html#逗号操作符"><i class="fa fa-check"></i><b>31.13</b> 逗号操作符</a></li>
</ul></li>
<li class="chapter" data-level="32" data-path="语句和声明.html"><a href="语句和声明.html"><i class="fa fa-check"></i><b>32</b> 语句和声明</a><ul>
<li class="chapter" data-level="32.1" data-path="语句和声明.html"><a href="语句和声明.html#控制流程"><i class="fa fa-check"></i><b>32.1</b> 控制流程</a><ul>
<li class="chapter" data-level="32.1.1" data-path="语句和声明.html"><a href="语句和声明.html#块声明"><i class="fa fa-check"></i><b>32.1.1</b> 块声明</a></li>
<li class="chapter" data-level="32.1.2" data-path="语句和声明.html"><a href="语句和声明.html#break-1"><i class="fa fa-check"></i><b>32.1.2</b> break</a></li>
<li class="chapter" data-level="32.1.3" data-path="语句和声明.html"><a href="语句和声明.html#continue"><i class="fa fa-check"></i><b>32.1.3</b> continue</a></li>
<li class="chapter" data-level="32.1.4" data-path="语句和声明.html"><a href="语句和声明.html#空语句"><i class="fa fa-check"></i><b>32.1.4</b> 空语句</a></li>
<li class="chapter" data-level="32.1.5" data-path="语句和声明.html"><a href="语句和声明.html#ifelse-1"><i class="fa fa-check"></i><b>32.1.5</b> if……else</a></li>
<li class="chapter" data-level="32.1.6" data-path="语句和声明.html"><a href="语句和声明.html#switch-1"><i class="fa fa-check"></i><b>32.1.6</b> switch</a></li>
<li class="chapter" data-level="32.1.7" data-path="语句和声明.html"><a href="语句和声明.html#throw"><i class="fa fa-check"></i><b>32.1.7</b> throw</a></li>
<li class="chapter" data-level="32.1.8" data-path="语句和声明.html"><a href="语句和声明.html#trycatch"><i class="fa fa-check"></i><b>32.1.8</b> try…catch</a></li>
</ul></li>
<li class="chapter" data-level="32.2" data-path="语句和声明.html"><a href="语句和声明.html#声明"><i class="fa fa-check"></i><b>32.2</b> 声明</a><ul>
<li class="chapter" data-level="32.2.1" data-path="语句和声明.html"><a href="语句和声明.html#var-1"><i class="fa fa-check"></i><b>32.2.1</b> var</a></li>
<li class="chapter" data-level="32.2.2" data-path="语句和声明.html"><a href="语句和声明.html#let"><i class="fa fa-check"></i><b>32.2.2</b> let</a></li>
<li class="chapter" data-level="32.2.3" data-path="语句和声明.html"><a href="语句和声明.html#const"><i class="fa fa-check"></i><b>32.2.3</b> const</a></li>
</ul></li>
<li class="chapter" data-level="32.3" data-path="语句和声明.html"><a href="语句和声明.html#函数和类"><i class="fa fa-check"></i><b>32.3</b> 函数和类</a><ul>
<li class="chapter" data-level="32.3.1" data-path="语句和声明.html"><a href="语句和声明.html#function-2"><i class="fa fa-check"></i><b>32.3.1</b> function</a></li>
<li class="chapter" data-level="32.3.2" data-path="语句和声明.html"><a href="语句和声明.html#function-3"><i class="fa fa-check"></i><b>32.3.2</b> function*</a></li>
<li class="chapter" data-level="32.3.3" data-path="语句和声明.html"><a href="语句和声明.html#return"><i class="fa fa-check"></i><b>32.3.3</b> return</a></li>
<li class="chapter" data-level="32.3.4" data-path="语句和声明.html"><a href="语句和声明.html#class-1"><i class="fa fa-check"></i><b>32.3.4</b> class</a></li>
</ul></li>
<li class="chapter" data-level="32.4" data-path="语句和声明.html"><a href="语句和声明.html#迭代器"><i class="fa fa-check"></i><b>32.4</b> 迭代器</a><ul>
<li class="chapter" data-level="32.4.1" data-path="语句和声明.html"><a href="语句和声明.html#dowhile-1"><i class="fa fa-check"></i><b>32.4.1</b> do…while</a></li>
<li class="chapter" data-level="32.4.2" data-path="语句和声明.html"><a href="语句和声明.html#for-1"><i class="fa fa-check"></i><b>32.4.2</b> for</a></li>
<li class="chapter" data-level="32.4.3" data-path="语句和声明.html"><a href="语句和声明.html#for-eachin"><i class="fa fa-check"></i><b>32.4.3</b> for each…in</a></li>
<li class="chapter" data-level="32.4.4" data-path="语句和声明.html"><a href="语句和声明.html#forin"><i class="fa fa-check"></i><b>32.4.4</b> for…in</a></li>
<li class="chapter" data-level="32.4.5" data-path="语句和声明.html"><a href="语句和声明.html#forof"><i class="fa fa-check"></i><b>32.4.5</b> for…of</a></li>
<li class="chapter" data-level="32.4.6" data-path="语句和声明.html"><a href="语句和声明.html#while-1"><i class="fa fa-check"></i><b>32.4.6</b> while</a></li>
</ul></li>
<li class="chapter" data-level="32.5" data-path="语句和声明.html"><a href="语句和声明.html#其他"><i class="fa fa-check"></i><b>32.5</b> 其他</a><ul>
<li class="chapter" data-level="32.5.1" data-path="语句和声明.html"><a href="语句和声明.html#debugger"><i class="fa fa-check"></i><b>32.5.1</b> debugger</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="33" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html"><i class="fa fa-check"></i><b>33</b> JavaScript 变量类型</a><ul>
<li class="chapter" data-level="33.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#boolean布尔型"><i class="fa fa-check"></i><b>33.1</b> Boolean布尔型</a></li>
<li class="chapter" data-level="33.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#null空类型"><i class="fa fa-check"></i><b>33.2</b> Null空类型</a></li>
<li class="chapter" data-level="33.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#undefined未定义类型"><i class="fa fa-check"></i><b>33.3</b> Undefined未定义类型</a></li>
<li class="chapter" data-level="33.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#number数值型"><i class="fa fa-check"></i><b>33.4</b> Number数值型</a><ul>
<li class="chapter" data-level="33.4.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#浮点数值"><i class="fa fa-check"></i><b>33.4.1</b> 浮点数值</a></li>
<li class="chapter" data-level="33.4.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#数值范围"><i class="fa fa-check"></i><b>33.4.2</b> 数值范围</a></li>
<li class="chapter" data-level="33.4.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#nan"><i class="fa fa-check"></i><b>33.4.3</b> NaN</a></li>
<li class="chapter" data-level="33.4.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#转化类型"><i class="fa fa-check"></i><b>33.4.4</b> 转化类型</a></li>
</ul></li>
<li class="chapter" data-level="33.5" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#string-字符串"><i class="fa fa-check"></i><b>33.5</b> String 字符串</a><ul>
<li class="chapter" data-level="33.5.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#转换为字符串"><i class="fa fa-check"></i><b>33.5.1</b> 转换为字符串</a></li>
</ul></li>
<li class="chapter" data-level="33.6" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#symbol-符号类型"><i class="fa fa-check"></i><b>33.6</b> Symbol 符号类型</a></li>
<li class="chapter" data-level="33.7" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#object-对象类型"><i class="fa fa-check"></i><b>33.7</b> Object 对象类型</a><ul>
<li class="chapter" data-level="33.7.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#数组"><i class="fa fa-check"></i><b>33.7.1</b> 数组</a></li>
</ul></li>
<li class="chapter" data-level="33.8" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#查看变量类型"><i class="fa fa-check"></i><b>33.8</b> 查看变量类型</a></li>
<li class="chapter" data-level="33.9" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#变量类型的转换"><i class="fa fa-check"></i><b>33.9</b> 变量类型的转换</a></li>
<li class="chapter" data-level="33.10" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascript-object"><i class="fa fa-check"></i><b>33.10</b> JavaScript Object</a><ul>
<li class="chapter" data-level="33.10.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#对象的创建"><i class="fa fa-check"></i><b>33.10.1</b> 对象的创建</a></li>
</ul></li>
<li class="chapter" data-level="33.11" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#更改删除对象中的属性"><i class="fa fa-check"></i><b>33.11</b> 更改、删除对象中的属性</a></li>
<li class="chapter" data-level="33.12" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#为对象增加方法"><i class="fa fa-check"></i><b>33.12</b> 为对象增加方法</a></li>
<li class="chapter" data-level="33.13" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#循环输出对象的属性"><i class="fa fa-check"></i><b>33.13</b> 循环输出对象的属性</a></li>
<li class="chapter" data-level="33.14" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascript-函数"><i class="fa fa-check"></i><b>33.14</b> JavaScript 函数</a><ul>
<li class="chapter" data-level="33.14.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#function对象"><i class="fa fa-check"></i><b>33.14.1</b> function对象</a></li>
<li class="chapter" data-level="33.14.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#函数的定义"><i class="fa fa-check"></i><b>33.14.2</b> 函数的定义</a></li>
<li class="chapter" data-level="33.14.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#函数参数"><i class="fa fa-check"></i><b>33.14.3</b> 函数参数</a></li>
<li class="chapter" data-level="33.14.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#变量作用域"><i class="fa fa-check"></i><b>33.14.4</b> 变量作用域</a></li>
</ul></li>
<li class="chapter" data-level="33.15" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#javascrip-数组"><i class="fa fa-check"></i><b>33.15</b> JavaScrip 数组</a><ul>
<li class="chapter" data-level="33.15.1" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#创建数组"><i class="fa fa-check"></i><b>33.15.1</b> 创建数组</a></li>
<li class="chapter" data-level="33.15.2" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#访问数组元素"><i class="fa fa-check"></i><b>33.15.2</b> 访问数组元素</a></li>
<li class="chapter" data-level="33.15.3" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#常用属性及方法"><i class="fa fa-check"></i><b>33.15.3</b> 常用属性及方法</a></li>
<li class="chapter" data-level="33.15.4" data-path="javascript-变量类型.html"><a href="javascript-变量类型.html#扩展阅读资料-12"><i class="fa fa-check"></i><b>33.15.4</b> 扩展阅读资料</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="34" data-path="全局对象.html"><a href="全局对象.html"><i class="fa fa-check"></i><b>34</b> 全局对象</a><ul>
<li class="chapter" data-level="34.1" data-path="全局对象.html"><a href="全局对象.html#浏览器对象模型-bom"><i class="fa fa-check"></i><b>34.1</b> 浏览器对象模型 BOM</a><ul>
<li class="chapter" data-level="34.1.1" data-path="全局对象.html"><a href="全局对象.html#window-对象"><i class="fa fa-check"></i><b>34.1.1</b> window 对象</a></li>
<li class="chapter" data-level="34.1.2" data-path="全局对象.html"><a href="全局对象.html#控制台"><i class="fa fa-check"></i><b>34.1.2</b> 控制台</a></li>
<li class="chapter" data-level="34.1.3" data-path="全局对象.html"><a href="全局对象.html#navigator-对象"><i class="fa fa-check"></i><b>34.1.3</b> navigator 对象</a></li>
<li class="chapter" data-level="34.1.4" data-path="全局对象.html"><a href="全局对象.html#location-对象"><i class="fa fa-check"></i><b>34.1.4</b> location 对象</a></li>
<li class="chapter" data-level="34.1.5" data-path="全局对象.html"><a href="全局对象.html#screen-对象"><i class="fa fa-check"></i><b>34.1.5</b> screen 对象</a></li>
<li class="chapter" data-level="34.1.6" data-path="全局对象.html"><a href="全局对象.html#history-对象"><i class="fa fa-check"></i><b>34.1.6</b> history 对象</a></li>
<li class="chapter" data-level="34.1.7" data-path="全局对象.html"><a href="全局对象.html#document-对象"><i class="fa fa-check"></i><b>34.1.7</b> document 对象</a></li>
</ul></li>
<li class="chapter" data-level="34.2" data-path="全局对象.html"><a href="全局对象.html#dom"><i class="fa fa-check"></i><b>34.2</b> DOM</a><ul>
<li class="chapter" data-level="34.2.1" data-path="全局对象.html"><a href="全局对象.html#html-文档与-dom"><i class="fa fa-check"></i><b>34.2.1</b> HTML 文档与 DOM</a></li>
<li class="chapter" data-level="34.2.2" data-path="全局对象.html"><a href="全局对象.html#节点"><i class="fa fa-check"></i><b>34.2.2</b> 节点</a></li>
<li class="chapter" data-level="34.2.3" data-path="全局对象.html"><a href="全局对象.html#使用-dom"><i class="fa fa-check"></i><b>34.2.3</b> 使用 DOM</a></li>
</ul></li>
<li class="chapter" data-level="34.3" data-path="全局对象.html"><a href="全局对象.html#json"><i class="fa fa-check"></i><b>34.3</b> JSON</a><ul>
<li class="chapter" data-level="34.3.1" data-path="全局对象.html"><a href="全局对象.html#转义"><i class="fa fa-check"></i><b>34.3.1</b> 转义</a></li>
<li class="chapter" data-level="34.3.2" data-path="全局对象.html"><a href="全局对象.html#方法"><i class="fa fa-check"></i><b>34.3.2</b> 方法</a></li>
</ul></li>
<li class="chapter" data-level="34.4" data-path="全局对象.html"><a href="全局对象.html#参考资料-4"><i class="fa fa-check"></i><b>34.4</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="35" data-path="事件.html"><a href="事件.html"><i class="fa fa-check"></i><b>35</b> 事件</a><ul>
<li class="chapter" data-level="35.1" data-path="事件.html"><a href="事件.html#事件监听方法"><i class="fa fa-check"></i><b>35.1</b> 事件监听方法</a><ul>
<li class="chapter" data-level="35.1.1" data-path="事件.html"><a href="事件.html#通用事件监听方法"><i class="fa fa-check"></i><b>35.1.1</b> 通用事件监听方法</a></li>
<li class="chapter" data-level="35.1.2" data-path="事件.html"><a href="事件.html#dom-监听事件的方法"><i class="fa fa-check"></i><b>35.1.2</b> DOM 监听事件的方法</a></li>
</ul></li>
<li class="chapter" data-level="35.2" data-path="事件.html"><a href="事件.html#事件对象"><i class="fa fa-check"></i><b>35.2</b> 事件对象</a></li>
</ul></li>
<li class="chapter" data-level="36" data-path="javascript-进阶.html"><a href="javascript-进阶.html"><i class="fa fa-check"></i><b>36</b> JavaScript 进阶</a><ul>
<li class="chapter" data-level="36.1" data-path="javascript-进阶.html"><a href="javascript-进阶.html#错误处理"><i class="fa fa-check"></i><b>36.1</b> 错误处理</a></li>
<li class="chapter" data-level="36.2" data-path="javascript-进阶.html"><a href="javascript-进阶.html#回调函数-callback"><i class="fa fa-check"></i><b>36.2</b> 回调函数 callback</a></li>
<li class="chapter" data-level="36.3" data-path="javascript-进阶.html"><a href="javascript-进阶.html#同步与异步"><i class="fa fa-check"></i><b>36.3</b> 同步与异步</a></li>
<li class="chapter" data-level="36.4" data-path="javascript-进阶.html"><a href="javascript-进阶.html#为什么使用-promise"><i class="fa fa-check"></i><b>36.4</b> 为什么使用 promise</a></li>
<li class="chapter" data-level="36.5" data-path="javascript-进阶.html"><a href="javascript-进阶.html#promise-对象"><i class="fa fa-check"></i><b>36.5</b> Promise 对象</a></li>
<li class="chapter" data-level="36.6" data-path="javascript-进阶.html"><a href="javascript-进阶.html#参考资料-5"><i class="fa fa-check"></i><b>36.6</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="37" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html"><i class="fa fa-check"></i><b>37</b> ECMAScript 6 简介</a><ul>
<li class="chapter" data-level="37.1" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#变量声明"><i class="fa fa-check"></i><b>37.1</b> 变量声明</a></li>
<li class="chapter" data-level="37.2" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#模板字符串"><i class="fa fa-check"></i><b>37.2</b> 模板字符串</a></li>
<li class="chapter" data-level="37.3" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#默认参数"><i class="fa fa-check"></i><b>37.3</b> 默认参数</a></li>
<li class="chapter" data-level="37.4" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#箭头函数"><i class="fa fa-check"></i><b>37.4</b> 箭头函数</a></li>
<li class="chapter" data-level="37.5" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#模块的导入和导出"><i class="fa fa-check"></i><b>37.5</b> 模块的导入和导出</a></li>
<li class="chapter" data-level="37.6" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#析构赋值"><i class="fa fa-check"></i><b>37.6</b> 析构赋值</a></li>
<li class="chapter" data-level="37.7" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#展开运算符"><i class="fa fa-check"></i><b>37.7</b> 展开运算符</a></li>
<li class="chapter" data-level="37.8" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#promise"><i class="fa fa-check"></i><b>37.8</b> Promise</a><ul>
<li class="chapter" data-level="37.8.1" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#回调函数-callback-1"><i class="fa fa-check"></i><b>37.8.1</b> 回调函数 callback</a></li>
<li class="chapter" data-level="37.8.2" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#同步与异步-1"><i class="fa fa-check"></i><b>37.8.2</b> 同步与异步</a></li>
<li class="chapter" data-level="37.8.3" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#为什么使用-promise-1"><i class="fa fa-check"></i><b>37.8.3</b> 为什么使用 promise</a></li>
<li class="chapter" data-level="37.8.4" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#promise-对象-1"><i class="fa fa-check"></i><b>37.8.4</b> Promise 对象</a></li>
</ul></li>
<li class="chapter" data-level="37.9" data-path="ecmascript-6-简介.html"><a href="ecmascript-6-简介.html#参考资料-6"><i class="fa fa-check"></i><b>37.9</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>IV SVG</b></span></li>
<li class="chapter" data-level="38" data-path="svg-1.html"><a href="svg-1.html"><i class="fa fa-check"></i><b>38</b> SVG</a><ul>
<li class="chapter" data-level="38.1" data-path="svg-1.html"><a href="svg-1.html#在html中使用的方式"><i class="fa fa-check"></i><b>38.1</b> 在HTML中使用的方式</a><ul>
<li class="chapter" data-level="38.1.1" data-path="svg-1.html"><a href="svg-1.html#作为内容"><i class="fa fa-check"></i><b>38.1.1</b> 作为内容</a></li>
<li class="chapter" data-level="38.1.2" data-path="svg-1.html"><a href="svg-1.html#作为图片"><i class="fa fa-check"></i><b>38.1.2</b> 作为图片</a></li>
<li class="chapter" data-level="38.1.3" data-path="svg-1.html"><a href="svg-1.html#作为元素"><i class="fa fa-check"></i><b>38.1.3</b> 作为元素</a></li>
</ul></li>
<li class="chapter" data-level="38.2" data-path="svg-1.html"><a href="svg-1.html#基本概念-1"><i class="fa fa-check"></i><b>38.2</b> 基本概念</a><ul>
<li class="chapter" data-level="38.2.1" data-path="svg-1.html"><a href="svg-1.html#坐标系"><i class="fa fa-check"></i><b>38.2.1</b> 坐标系</a></li>
<li class="chapter" data-level="38.2.2" data-path="svg-1.html"><a href="svg-1.html#长度单位"><i class="fa fa-check"></i><b>38.2.2</b> 长度单位</a></li>
<li class="chapter" data-level="38.2.3" data-path="svg-1.html"><a href="svg-1.html#用户坐标系统"><i class="fa fa-check"></i><b>38.2.3</b> 用户坐标系统</a></li>
</ul></li>
<li class="chapter" data-level="38.3" data-path="svg-1.html"><a href="svg-1.html#形状"><i class="fa fa-check"></i><b>38.3</b> 形状</a><ul>
<li class="chapter" data-level="38.3.1" data-path="svg-1.html"><a href="svg-1.html#线-line"><i class="fa fa-check"></i><b>38.3.1</b> 线 <code>&lt;line&gt;</code></a></li>
<li class="chapter" data-level="38.3.2" data-path="svg-1.html"><a href="svg-1.html#矩形-rect"><i class="fa fa-check"></i><b>38.3.2</b> 矩形 <code>&lt;rect&gt;</code></a></li>
<li class="chapter" data-level="38.3.3" data-path="svg-1.html"><a href="svg-1.html#圆形-circle"><i class="fa fa-check"></i><b>38.3.3</b> 圆形 <code>&lt;circle&gt;</code></a></li>
<li class="chapter" data-level="38.3.4" data-path="svg-1.html"><a href="svg-1.html#椭圆-ellipse"><i class="fa fa-check"></i><b>38.3.4</b> 椭圆 <code>&lt;ellipse&gt;</code></a></li>
<li class="chapter" data-level="38.3.5" data-path="svg-1.html"><a href="svg-1.html#折线-polyline"><i class="fa fa-check"></i><b>38.3.5</b> 折线 <code>&lt;polyline&gt;</code></a></li>
<li class="chapter" data-level="38.3.6" data-path="svg-1.html"><a href="svg-1.html#多边形-polygon"><i class="fa fa-check"></i><b>38.3.6</b> 多边形 <code>&lt;polygon&gt;</code></a></li>
<li class="chapter" data-level="38.3.7" data-path="svg-1.html"><a href="svg-1.html#路径-path"><i class="fa fa-check"></i><b>38.3.7</b> 路径 <code>&lt;path&gt;</code></a></li>
</ul></li>
<li class="chapter" data-level="38.4" data-path="svg-1.html"><a href="svg-1.html#文本"><i class="fa fa-check"></i><b>38.4</b> 文本</a></li>
<li class="chapter" data-level="38.5" data-path="svg-1.html"><a href="svg-1.html#填充和边框"><i class="fa fa-check"></i><b>38.5</b> 填充和边框</a></li>
<li class="chapter" data-level="38.6" data-path="svg-1.html"><a href="svg-1.html#组合"><i class="fa fa-check"></i><b>38.6</b> 组合</a></li>
<li class="chapter" data-level="38.7" data-path="svg-1.html"><a href="svg-1.html#进阶"><i class="fa fa-check"></i><b>38.7</b> 进阶</a></li>
<li class="chapter" data-level="38.8" data-path="svg-1.html"><a href="svg-1.html#参考资料-7"><i class="fa fa-check"></i><b>38.8</b> 参考资料</a></li>
</ul></li>
<li class="part"><span><b>V D3</b></span></li>
<li class="chapter" data-level="39" data-path="d3.html"><a href="d3.html"><i class="fa fa-check"></i><b>39</b> D3</a><ul>
<li class="chapter" data-level="39.1" data-path="d3.html"><a href="d3.html#d3.js-简介"><i class="fa fa-check"></i><b>39.1</b> D3.js 简介</a></li>
<li class="chapter" data-level="39.2" data-path="d3.html"><a href="d3.html#d3.js必要基础"><i class="fa fa-check"></i><b>39.2</b> D3.js必要基础</a><ul>
<li class="chapter" data-level="39.2.1" data-path="d3.html"><a href="d3.html#链式操作"><i class="fa fa-check"></i><b>39.2.1</b> 链式操作</a></li>
<li class="chapter" data-level="39.2.2" data-path="d3.html"><a href="d3.html#绑定数据"><i class="fa fa-check"></i><b>39.2.2</b> 绑定数据</a></li>
<li class="chapter" data-level="39.2.3" data-path="d3.html"><a href="d3.html#d3-selection"><i class="fa fa-check"></i><b>39.2.3</b> d3-selection</a></li>
<li class="chapter" data-level="39.2.4" data-path="d3.html"><a href="d3.html#用d3生成svg"><i class="fa fa-check"></i><b>39.2.4</b> 用d3生成svg</a></li>
</ul></li>
<li class="chapter" data-level="39.3" data-path="d3.html"><a href="d3.html#制作柱状图"><i class="fa fa-check"></i><b>39.3</b> 制作柱状图</a><ul>
<li class="chapter" data-level="39.3.1" data-path="d3.html"><a href="d3.html#准备工作"><i class="fa fa-check"></i><b>39.3.1</b> 准备工作</a></li>
<li class="chapter" data-level="39.3.2" data-path="d3.html"><a href="d3.html#准备图表所在容器"><i class="fa fa-check"></i><b>39.3.2</b> 准备图表所在容器</a></li>
<li class="chapter" data-level="39.3.3" data-path="d3.html"><a href="d3.html#设定图表大小"><i class="fa fa-check"></i><b>39.3.3</b> 设定图表大小</a></li>
<li class="chapter" data-level="39.3.4" data-path="d3.html"><a href="d3.html#准备数据"><i class="fa fa-check"></i><b>39.3.4</b> 准备数据</a></li>
<li class="chapter" data-level="39.3.5" data-path="d3.html"><a href="d3.html#在svg中加入到容器中"><i class="fa fa-check"></i><b>39.3.5</b> 在svg中加入到容器中</a></li>
<li class="chapter" data-level="39.3.6" data-path="d3.html"><a href="d3.html#在svg中加入g元素作为子容器"><i class="fa fa-check"></i><b>39.3.6</b> 在svg中加入g元素作为子容器</a></li>
<li class="chapter" data-level="39.3.7" data-path="d3.html"><a href="d3.html#添加表头"><i class="fa fa-check"></i><b>39.3.7</b> 添加表头</a></li>
<li class="chapter" data-level="39.3.8" data-path="d3.html"><a href="d3.html#创建比例尺"><i class="fa fa-check"></i><b>39.3.8</b> 创建比例尺</a></li>
<li class="chapter" data-level="39.3.9" data-path="d3.html"><a href="d3.html#添加x轴和y轴"><i class="fa fa-check"></i><b>39.3.9</b> 添加x轴和y轴</a></li>
<li class="chapter" data-level="39.3.10" data-path="d3.html"><a href="d3.html#添加放直方的容器"><i class="fa fa-check"></i><b>39.3.10</b> 添加放直方的容器</a></li>
<li class="chapter" data-level="39.3.11" data-path="d3.html"><a href="d3.html#添加数据"><i class="fa fa-check"></i><b>39.3.11</b> 添加数据</a></li>
<li class="chapter" data-level="39.3.12" data-path="d3.html"><a href="d3.html#添加说明文字"><i class="fa fa-check"></i><b>39.3.12</b> 添加说明文字</a></li>
<li class="chapter" data-level="39.3.13" data-path="d3.html"><a href="d3.html#添加hover事件"><i class="fa fa-check"></i><b>39.3.13</b> 添加hover事件</a></li>
<li class="chapter" data-level="39.3.14" data-path="d3.html"><a href="d3.html#设置样式"><i class="fa fa-check"></i><b>39.3.14</b> 设置样式</a></li>
</ul></li>
<li class="chapter" data-level="39.4" data-path="d3.html"><a href="d3.html#参考资料-8"><i class="fa fa-check"></i><b>39.4</b> 参考资料</a></li>
<li class="chapter" data-level="39.5" data-path="d3.html"><a href="d3.html#选集selection"><i class="fa fa-check"></i><b>39.5</b> 选集selection</a></li>
</ul></li>
<li class="chapter" data-level="40" data-path="d3中的选集.html"><a href="d3中的选集.html"><i class="fa fa-check"></i><b>40</b> D3中的选集</a><ul>
<li class="chapter" data-level="40.1" data-path="d3中的选集.html"><a href="d3中的选集.html#选取单个元素"><i class="fa fa-check"></i><b>40.1</b> 选取单个元素</a></li>
<li class="chapter" data-level="40.2" data-path="d3中的选集.html"><a href="d3中的选集.html#选取多个元素"><i class="fa fa-check"></i><b>40.2</b> 选取多个元素</a></li>
<li class="chapter" data-level="40.3" data-path="d3中的选集.html"><a href="d3中的选集.html#使用子选择器"><i class="fa fa-check"></i><b>40.3</b> 使用子选择器</a></li>
<li class="chapter" data-level="40.4" data-path="d3中的选集.html"><a href="d3中的选集.html#获得原始元素"><i class="fa fa-check"></i><b>40.4</b> 获得原始元素</a></li>
<li class="chapter" data-level="40.5" data-path="d3中的选集.html"><a href="d3中的选集.html#参考资料-9"><i class="fa fa-check"></i><b>40.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="41" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html"><i class="fa fa-check"></i><b>41</b> D3.js中的数据绑定与更新</a><ul>
<li class="chapter" data-level="41.1" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#进入更新退出模式"><i class="fa fa-check"></i><b>41.1</b> 进入—更新—退出模式</a><ul>
<li class="chapter" data-level="41.1.1" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#理解updateenterexit"><i class="fa fa-check"></i><b>41.1.1</b> 理解Update、Enter、Exit</a></li>
</ul></li>
<li class="chapter" data-level="41.2" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#将数组绑定为数据"><i class="fa fa-check"></i><b>41.2</b> 将数组绑定为数据</a></li>
<li class="chapter" data-level="41.3" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#将对象绑定为数组"><i class="fa fa-check"></i><b>41.3</b> 将对象绑定为数组</a></li>
<li class="chapter" data-level="41.4" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#打开外部数据文件"><i class="fa fa-check"></i><b>41.4</b> 打开外部数据文件</a></li>
<li class="chapter" data-level="41.5" data-path="d3-js中的数据绑定与更新.html"><a href="d3-js中的数据绑定与更新.html#参考资料-10"><i class="fa fa-check"></i><b>41.5</b> 参考资料</a></li>
</ul></li>
<li class="chapter" data-level="42" data-path="比例尺scale.html"><a href="比例尺scale.html"><i class="fa fa-check"></i><b>42</b> 比例尺Scale</a><ul>
<li class="chapter" data-level="42.1" data-path="比例尺scale.html"><a href="比例尺scale.html#连续比例尺"><i class="fa fa-check"></i><b>42.1</b> 连续比例尺</a></li>
<li class="chapter" data-level="42.2" data-path="比例尺scale.html"><a href="比例尺scale.html#序数比例尺"><i class="fa fa-check"></i><b>42.2</b> 序数比例尺</a></li>
</ul></li>
<li class="chapter" data-level="43" data-path="坐标轴.html"><a href="坐标轴.html"><i class="fa fa-check"></i><b>43</b> 坐标轴</a><ul>
<li class="chapter" data-level="43.1" data-path="坐标轴.html"><a href="坐标轴.html#d3.axisbottomscale"><i class="fa fa-check"></i><b>43.1</b> d3.axisBottom(scale)</a></li>
</ul></li>
<li class="part"><span><b>VI Node.js</b></span></li>
<li class="chapter" data-level="44" data-path="node-js.html"><a href="node-js.html"><i class="fa fa-check"></i><b>44</b> node.js</a><ul>
<li class="chapter" data-level="44.1" data-path="node-js.html"><a href="node-js.html#node.js-与-v8-引擎"><i class="fa fa-check"></i><b>44.1</b> Node.js 与 V8 引擎</a></li>
<li class="chapter" data-level="44.2" data-path="node-js.html"><a href="node-js.html#长轮询与非阻塞"><i class="fa fa-check"></i><b>44.2</b> 长轮询与非阻塞</a></li>
<li class="chapter" data-level="44.3" data-path="node-js.html"><a href="node-js.html#npm-介绍"><i class="fa fa-check"></i><b>44.3</b> NPM 介绍</a><ul>
<li class="chapter" data-level="44.3.1" data-path="node-js.html"><a href="node-js.html#安装"><i class="fa fa-check"></i><b>44.3.1</b> 安装</a></li>
<li class="chapter" data-level="44.3.2" data-path="node-js.html"><a href="node-js.html#更新"><i class="fa fa-check"></i><b>44.3.2</b> 更新</a></li>
<li class="chapter" data-level="44.3.3" data-path="node-js.html"><a href="node-js.html#常用-npm-命令"><i class="fa fa-check"></i><b>44.3.3</b> 常用 NPM 命令</a></li>
</ul></li>
<li class="chapter" data-level="44.4" data-path="node-js.html"><a href="node-js.html#node.js-起步"><i class="fa fa-check"></i><b>44.4</b> Node.js 起步</a><ul>
<li class="chapter" data-level="44.4.1" data-path="node-js.html"><a href="node-js.html#设置npm配置文件package.json"><i class="fa fa-check"></i><b>44.4.1</b> 设置NPM配置文件package.json</a></li>
</ul></li>
<li class="chapter" data-level="44.5" data-path="node-js.html"><a href="node-js.html#使用模块"><i class="fa fa-check"></i><b>44.5</b> 使用模块</a><ul>
<li class="chapter" data-level="44.5.1" data-path="node-js.html"><a href="node-js.html#使用内置的node.js模块"><i class="fa fa-check"></i><b>44.5.1</b> 使用内置的Node.js模块</a></li>
<li class="chapter" data-level="44.5.2" data-path="node-js.html"><a href="node-js.html#使用第三方node.js模块"><i class="fa fa-check"></i><b>44.5.2</b> 使用第三方Node.js模块</a></li>
<li class="chapter" data-level="44.5.3" data-path="node-js.html"><a href="node-js.html#创建并使用自定义的node.js模块"><i class="fa fa-check"></i><b>44.5.3</b> 创建并使用自定义的Node.js模块</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="45" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html"><i class="fa fa-check"></i><b>45</b> Node.js 常用核心模块</a><ul>
<li class="chapter" data-level="45.1" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#事件-events"><i class="fa fa-check"></i><b>45.1</b> 事件 Events</a></li>
<li class="chapter" data-level="45.2" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#file-system-模块"><i class="fa fa-check"></i><b>45.2</b> File System 模块</a><ul>
<li class="chapter" data-level="45.2.1" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#stat-获得文件信息"><i class="fa fa-check"></i><b>45.2.1</b> stat 获得文件信息</a></li>
<li class="chapter" data-level="45.2.2" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#mkdir"><i class="fa fa-check"></i><b>45.2.2</b> mkdir</a></li>
<li class="chapter" data-level="45.2.3" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#创建文件并写入内容"><i class="fa fa-check"></i><b>45.2.3</b> 创建文件并写入内容</a></li>
<li class="chapter" data-level="45.2.4" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#读取内容"><i class="fa fa-check"></i><b>45.2.4</b> 读取内容</a></li>
<li class="chapter" data-level="45.2.5" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#列出目录"><i class="fa fa-check"></i><b>45.2.5</b> 列出目录</a></li>
<li class="chapter" data-level="45.2.6" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#重命名"><i class="fa fa-check"></i><b>45.2.6</b> 重命名</a></li>
<li class="chapter" data-level="45.2.7" data-path="node-js-常用核心模块.html"><a href="node-js-常用核心模块.html#删除目录与文件"><i class="fa fa-check"></i><b>45.2.7</b> 删除目录与文件</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="46" data-path="buffer.html"><a href="buffer.html"><i class="fa fa-check"></i><b>46</b> buffer</a><ul>
<li class="chapter" data-level="46.1" data-path="buffer.html"><a href="buffer.html#常用属性和方法"><i class="fa fa-check"></i><b>46.1</b> 常用属性和方法</a><ul>
<li class="chapter" data-level="46.1.1" data-path="buffer.html"><a href="buffer.html#buffer.fromstring-encoding"><i class="fa fa-check"></i><b>46.1.1</b> Buffer.from(string [, encoding])</a></li>
<li class="chapter" data-level="46.1.2" data-path="buffer.html"><a href="buffer.html#buf.tostringencoding-start-end"><i class="fa fa-check"></i><b>46.1.2</b> buf.toString([encoding[, start[, end]]])</a></li>
<li class="chapter" data-level="46.1.3" data-path="buffer.html"><a href="buffer.html#buf.length"><i class="fa fa-check"></i><b>46.1.3</b> buf.length</a></li>
</ul></li>
<li class="chapter" data-level="46.2" data-path="buffer.html"><a href="buffer.html#stream"><i class="fa fa-check"></i><b>46.2</b> stream</a><ul>
<li class="chapter" data-level="46.2.1" data-path="buffer.html"><a href="buffer.html#为什么要使用流"><i class="fa fa-check"></i><b>46.2.1</b> 为什么要使用流</a></li>
<li class="chapter" data-level="46.2.2" data-path="buffer.html"><a href="buffer.html#node.js-中的流类别"><i class="fa fa-check"></i><b>46.2.2</b> Node.js 中的流类别</a></li>
<li class="chapter" data-level="46.2.3" data-path="buffer.html"><a href="buffer.html#读取文件流"><i class="fa fa-check"></i><b>46.2.3</b> 读取文件流</a></li>
<li class="chapter" data-level="46.2.4" data-path="buffer.html"><a href="buffer.html#可读流的事件"><i class="fa fa-check"></i><b>46.2.4</b> 可读流的事件</a></li>
<li class="chapter" data-level="46.2.5" data-path="buffer.html"><a href="buffer.html#写入流信息"><i class="fa fa-check"></i><b>46.2.5</b> 写入流信息</a></li>
<li class="chapter" data-level="46.2.6" data-path="buffer.html"><a href="buffer.html#管道-pipe"><i class="fa fa-check"></i><b>46.2.6</b> 管道 pipe</a></li>
</ul></li>
<li class="chapter" data-level="46.3" data-path="buffer.html"><a href="buffer.html#htpp-模块"><i class="fa fa-check"></i><b>46.3</b> HTPP 模块</a><ul>
<li class="chapter" data-level="46.3.1" data-path="buffer.html"><a href="buffer.html#http.serverresponse-类"><i class="fa fa-check"></i><b>46.3.1</b> http.ServerResponse 类</a></li>
<li class="chapter" data-level="46.3.2" data-path="buffer.html"><a href="buffer.html#创建服务器"><i class="fa fa-check"></i><b>46.3.2</b> 创建服务器</a></li>
</ul></li>
<li class="chapter" data-level="46.4" data-path="buffer.html"><a href="buffer.html#扩展阅读资料-13"><i class="fa fa-check"></i><b>46.4</b> 扩展阅读资料</a></li>
</ul></li>
<li class="chapter" data-level="47" data-path="fs-模块.html"><a href="fs-模块.html"><i class="fa fa-check"></i><b>47</b> fs 模块</a><ul>
<li class="chapter" data-level="47.1" data-path="fs-模块.html"><a href="fs-模块.html#回调函数-1"><i class="fa fa-check"></i><b>47.1</b> 回调函数</a></li>
<li class="chapter" data-level="47.2" data-path="fs-模块.html"><a href="fs-模块.html#同步与异步的区别"><i class="fa fa-check"></i><b>47.2</b> 同步与异步的区别</a></li>
<li class="chapter" data-level="47.3" data-path="fs-模块.html"><a href="fs-模块.html#使用fs模块读取文件"><i class="fa fa-check"></i><b>47.3</b> 使用fs模块读取文件</a></li>
<li class="chapter" data-level="47.4" data-path="fs-模块.html"><a href="fs-模块.html#promise对象"><i class="fa fa-check"></i><b>47.4</b> promise对象</a></li>
</ul></li>
<li class="part"><span><b>VII Vue</b></span></li>
<li class="chapter" data-level="48" data-path="vue-简介.html"><a href="vue-简介.html"><i class="fa fa-check"></i><b>48</b> Vue 简介</a><ul>
<li class="chapter" data-level="48.1" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-是什么"><i class="fa fa-check"></i><b>48.1</b> Vue.js 是什么</a></li>
<li class="chapter" data-level="48.2" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-解决了什么问题"><i class="fa fa-check"></i><b>48.2</b> Vue.js 解决了什么问题</a></li>
<li class="chapter" data-level="48.3" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-学习资源"><i class="fa fa-check"></i><b>48.3</b> Vue.js 学习资源</a></li>
<li class="chapter" data-level="48.4" data-path="vue-简介.html"><a href="vue-简介.html#vue.js-实例对象"><i class="fa fa-check"></i><b>48.4</b> Vue.js 实例对象</a></li>
</ul></li>
<li class="chapter" data-level="49" data-path="vue-js-模板.html"><a href="vue-js-模板.html"><i class="fa fa-check"></i><b>49</b> Vue.js 模板</a><ul>
<li class="chapter" data-level="49.1" data-path="vue-js-模板.html"><a href="vue-js-模板.html#元素文本插值"><i class="fa fa-check"></i><b>49.1</b> 元素文本插值</a></li>
<li class="chapter" data-level="49.2" data-path="vue-js-模板.html"><a href="vue-js-模板.html#元素属性值"><i class="fa fa-check"></i><b>49.2</b> 元素属性值</a></li>
<li class="chapter" data-level="49.3" data-path="vue-js-模板.html"><a href="vue-js-模板.html#指令"><i class="fa fa-check"></i><b>49.3</b> 指令</a><ul>
<li class="chapter" data-level="49.3.1" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-text"><i class="fa fa-check"></i><b>49.3.1</b> v-text</a></li>
<li class="chapter" data-level="49.3.2" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-html"><i class="fa fa-check"></i><b>49.3.2</b> v-html</a></li>
<li class="chapter" data-level="49.3.3" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-show"><i class="fa fa-check"></i><b>49.3.3</b> v-show</a></li>
<li class="chapter" data-level="49.3.4" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-if"><i class="fa fa-check"></i><b>49.3.4</b> v-if</a></li>
<li class="chapter" data-level="49.3.5" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-else"><i class="fa fa-check"></i><b>49.3.5</b> v-else</a></li>
<li class="chapter" data-level="49.3.6" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-else-if"><i class="fa fa-check"></i><b>49.3.6</b> v-else-if</a></li>
<li class="chapter" data-level="49.3.7" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-for"><i class="fa fa-check"></i><b>49.3.7</b> v-for</a></li>
<li class="chapter" data-level="49.3.8" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-on"><i class="fa fa-check"></i><b>49.3.8</b> v-on</a></li>
<li class="chapter" data-level="49.3.9" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-bind"><i class="fa fa-check"></i><b>49.3.9</b> v-bind</a></li>
<li class="chapter" data-level="49.3.10" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-model"><i class="fa fa-check"></i><b>49.3.10</b> v-model</a></li>
<li class="chapter" data-level="49.3.11" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-pre"><i class="fa fa-check"></i><b>49.3.11</b> v-pre</a></li>
<li class="chapter" data-level="49.3.12" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-cloak"><i class="fa fa-check"></i><b>49.3.12</b> v-cloak</a></li>
<li class="chapter" data-level="49.3.13" data-path="vue-js-模板.html"><a href="vue-js-模板.html#v-once"><i class="fa fa-check"></i><b>49.3.13</b> v-once</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="50" data-path="vue-js-组件.html"><a href="vue-js-组件.html"><i class="fa fa-check"></i><b>50</b> Vue.js 组件</a><ul>
<li class="chapter" data-level="50.1" data-path="vue-js-组件.html"><a href="vue-js-组件.html#全局组件的声明"><i class="fa fa-check"></i><b>50.1</b> 全局组件的声明</a></li>
<li class="chapter" data-level="50.2" data-path="vue-js-组件.html"><a href="vue-js-组件.html#全局组件的使用"><i class="fa fa-check"></i><b>50.2</b> 全局组件的使用</a></li>
<li class="chapter" data-level="50.3" data-path="vue-js-组件.html"><a href="vue-js-组件.html#局部组件的定义及使用"><i class="fa fa-check"></i><b>50.3</b> 局部组件的定义及使用</a></li>
</ul></li>
<li class="part"><span><b>VIII Jquery</b></span></li>
<li class="chapter" data-level="51" data-path="jquery-简介.html"><a href="jquery-简介.html"><i class="fa fa-check"></i><b>51</b> jQuery 简介</a><ul>
<li class="chapter" data-level="51.1" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-基础概念"><i class="fa fa-check"></i><b>51.1</b> jQuery 基础概念</a><ul>
<li class="chapter" data-level="51.1.1" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-中的"><i class="fa fa-check"></i><b>51.1.1</b> jQuery 中的“$”</a></li>
<li class="chapter" data-level="51.1.2" data-path="jquery-简介.html"><a href="jquery-简介.html#document-.ready"><i class="fa fa-check"></i><b>51.1.2</b> <code>$( document ).ready()</code></a></li>
<li class="chapter" data-level="51.1.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-选择符"><i class="fa fa-check"></i><b>51.1.3</b> jQuery 选择符</a></li>
</ul></li>
<li class="chapter" data-level="51.2" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery的扩展选择符"><i class="fa fa-check"></i><b>51.2</b> jQuery的扩展选择符</a></li>
<li class="chapter" data-level="51.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery事件处理"><i class="fa fa-check"></i><b>51.3</b> jQuery事件处理</a><ul>
<li class="chapter" data-level="51.3.1" data-path="jquery-简介.html"><a href="jquery-简介.html#处理简单事件"><i class="fa fa-check"></i><b>51.3.1</b> 处理简单事件</a></li>
<li class="chapter" data-level="51.3.2" data-path="jquery-简介.html"><a href="jquery-简介.html#事件对象-1"><i class="fa fa-check"></i><b>51.3.2</b> 事件对象</a></li>
<li class="chapter" data-level="51.3.3" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery-与-css"><i class="fa fa-check"></i><b>51.3.3</b> jQuery 与 CSS</a></li>
<li class="chapter" data-level="51.3.4" data-path="jquery-简介.html"><a href="jquery-简介.html#jquery特效"><i class="fa fa-check"></i><b>51.3.4</b> jQuery特效</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="52" data-path="jquery应用案例.html"><a href="jquery应用案例.html"><i class="fa fa-check"></i><b>52</b> jQuery应用案例</a><ul>
<li class="chapter" data-level="52.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#返回顶部"><i class="fa fa-check"></i><b>52.1</b> 返回顶部</a><ul>
<li class="chapter" data-level="52.1.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理"><i class="fa fa-check"></i><b>52.1.1</b> 原理</a></li>
<li class="chapter" data-level="52.1.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码"><i class="fa fa-check"></i><b>52.1.2</b> 代码</a></li>
<li class="chapter" data-level="52.1.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析"><i class="fa fa-check"></i><b>52.1.3</b> 分析</a></li>
</ul></li>
<li class="chapter" data-level="52.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#图片轮播"><i class="fa fa-check"></i><b>52.2</b> 图片轮播</a><ul>
<li class="chapter" data-level="52.2.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理-1"><i class="fa fa-check"></i><b>52.2.1</b> 原理</a></li>
<li class="chapter" data-level="52.2.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码-1"><i class="fa fa-check"></i><b>52.2.2</b> 代码</a></li>
<li class="chapter" data-level="52.2.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析-1"><i class="fa fa-check"></i><b>52.2.3</b> 分析</a></li>
</ul></li>
<li class="chapter" data-level="52.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#全选按钮"><i class="fa fa-check"></i><b>52.3</b> 全选按钮</a><ul>
<li class="chapter" data-level="52.3.1" data-path="jquery应用案例.html"><a href="jquery应用案例.html#原理-2"><i class="fa fa-check"></i><b>52.3.1</b> 原理</a></li>
<li class="chapter" data-level="52.3.2" data-path="jquery应用案例.html"><a href="jquery应用案例.html#代码-2"><i class="fa fa-check"></i><b>52.3.2</b> 代码</a></li>
<li class="chapter" data-level="52.3.3" data-path="jquery应用案例.html"><a href="jquery应用案例.html#分析-2"><i class="fa fa-check"></i><b>52.3.3</b> 分析</a></li>
</ul></li>
</ul></li>
<li class="divider"></li>
<li><a href="https://bookdown.org" target="blank">本书由 bookdown 强力驱动</a></li>

</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">前端开发2020版</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="css-cascade" class="section level1">
<h1><span class="header-section-number">第 18 章</span> 样式级联</h1>
<p>样式表共有三个来源：作者、用户以及用户代理（通常为浏览器）。</p>
<ol style="list-style-type: decimal">
<li>作者指的是源文件的创作者。他可以通过前面叙述的三种方式指定样式表。</li>
<li>用户。用户可对特定文档指定样式信息，例如：用户指定包含样式信息的文件。</li>
<li>浏览器。 浏览器肯定会应用默认样式。</li>
</ol>
<p>CSS 层级为每个样式指定权重。当应用多条规则时，权重最高的规则优先。</p>
<p>层级样式表之所以叫作“层级”，就是规则可以重叠、可以嵌套。这样就产生了新的问题：当规则重叠时，CSS 是如何决定采用哪个规则呢？总的原则是：权重越高的规则优先，相同权重的规则，后面最出现的规则将覆盖前面的规则。如：</p>
<div class="sourceCode" id="cb79"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb79-1"><a href="css-cascade.html#cb79-1"></a>p {</span>
<span id="cb79-2"><a href="css-cascade.html#cb79-2"></a>  <span class="kw">background</span>: <span class="cn">orange</span><span class="op">;</span></span>
<span id="cb79-3"><a href="css-cascade.html#cb79-3"></a>  <span class="kw">font-size</span>: <span class="dv">24</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb79-4"><a href="css-cascade.html#cb79-4"></a>}</span>
<span id="cb79-5"><a href="css-cascade.html#cb79-5"></a>p {</span>
<span id="cb79-6"><a href="css-cascade.html#cb79-6"></a>  <span class="kw">background</span>: <span class="cn">green</span><span class="op">;</span></span>
<span id="cb79-7"><a href="css-cascade.html#cb79-7"></a>}</span></code></pre></div>
<p>浏览器在渲染页面时，会从上至下执行 CSS 规则，这样，上述代码中一开始声明的段落橙色背景，会被随后声明的段落绿色背景取代。</p>
<p>默认情况下，作者创建的规则权重高于用户创建的规则。作者和用户创建的规则优先级别高于浏览器默认规则。</p>
<div id="级联顺序" class="section level2">
<h2><span class="header-section-number">18.1</span> 级联顺序</h2>
<p>浏览器按照如下规则寻找元素和属性的值：</p>
<ol style="list-style-type: decimal">
<li>为不同媒体类型查找所有应用规则。</li>
<li>按照重要级别（normal or important）和来源（author, user, or user agent）对规则进行排序。
<ol style="list-style-type: decimal">
<li>浏览器声明的规则</li>
<li>用户声明的普通规则</li>
<li>作者声明的普通规则</li>
<li>作者声明的重要规则</li>
<li>用户指定的重要规则</li>
</ol></li>
<li>选择符越具体的规则越优先。伪元素和伪类选择符被视为正常元素和类。最后，按照具体程度进行排序，如果两个选择符拥有相同的权重、来源和具体程度，则后出现的规则优先。</li>
</ol>
</div>
<div id="important-规则" class="section level2">
<h2><span class="header-section-number">18.2</span> !important 规则</h2>
<p><code>!important</code>声明的规则优先级别高于正常方式声明的规则，并且用户申明的<code>!important</code>规则优先于作者指定的<code>!important</code>规则。</p>
</div>
<div id="选择符优先级别" class="section level2">
<h2><span class="header-section-number">18.3</span> 选择符优先级别</h2>
<p>除了先后顺序外，CSS 还按照选择符的具体程度来决定优先级别，具体计算规则如下：</p>
<ol style="list-style-type: decimal">
<li>计算元素中的 <code>style</code> 属性的值，如果设定了 <code>style</code> 属性，则 <code>a=1</code>。</li>
<li>计算选择符中的 <code>ID</code> 选择符数量 (<code>= b</code>)。</li>
<li>计算选择符中的类选择符、属性选择符和伪类选择符数量 (<code>= c</code>)。</li>
<li>计算元素选择符和伪元素选择符的数量 (<code>= d</code>)</li>
<li>忽略通配选择符。</li>
<li>将 <code>a-b-c-d</code> 的值连接在一起就得到选择符的优先级别，该值越大，优先级别越高。</li>
</ol>
<p>例如：</p>
<div class="sourceCode" id="cb80"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb80-1"><a href="css-cascade.html#cb80-1"></a> <span class="op">*</span>             {}  <span class="co">/* a=0 b=0 c=0 d=0 -&gt; specificity = 0,0,0,0 */</span></span>
<span id="cb80-2"><a href="css-cascade.html#cb80-2"></a> li            {}  <span class="co">/* a=0 b=0 c=0 d=1 -&gt; specificity = 0,0,0,1 */</span></span>
<span id="cb80-3"><a href="css-cascade.html#cb80-3"></a> li<span class="in">:first-line</span> {}  <span class="co">/* a=0 b=0 c=0 d=2 -&gt; specificity = 0,0,0,2 */</span></span>
<span id="cb80-4"><a href="css-cascade.html#cb80-4"></a> ul li         {}  <span class="co">/* a=0 b=0 c=0 d=2 -&gt; specificity = 0,0,0,2 */</span></span>
<span id="cb80-5"><a href="css-cascade.html#cb80-5"></a> ul ol<span class="op">+</span>li      {}  <span class="co">/* a=0 b=0 c=0 d=3 -&gt; specificity = 0,0,0,3 */</span></span>
<span id="cb80-6"><a href="css-cascade.html#cb80-6"></a> h1 <span class="op">+</span> <span class="op">*</span><span class="ex">[rel</span><span class="op">=</span><span class="st">up</span><span class="ex">]</span>{}  <span class="co">/* a=0 b=0 c=1 d=1 -&gt; specificity = 0,0,1,1 */</span></span>
<span id="cb80-7"><a href="css-cascade.html#cb80-7"></a> ul ol li<span class="fu">.red</span>  {}  <span class="co">/* a=0 b=0 c=1 d=3 -&gt; specificity = 0,0,1,3 */</span></span>
<span id="cb80-8"><a href="css-cascade.html#cb80-8"></a> li<span class="fu">.red.level</span>  {}  <span class="co">/* a=0 b=0 c=2 d=1 -&gt; specificity = 0,0,2,1 */</span></span>
<span id="cb80-9"><a href="css-cascade.html#cb80-9"></a> <span class="pp">#x34y</span>         {}  <span class="co">/* a=0 b=1 c=0 d=0 -&gt; specificity = 0,1,0,0 */</span></span>
<span id="cb80-10"><a href="css-cascade.html#cb80-10"></a> style=&quot;&quot;          <span class="co">/* a=1 b=0 c=0 d=0 -&gt; specificity = 1,0,0,0 */</span></span></code></pre></div>
</div>
<div id="扩展阅读资料-11" class="section level2">
<h2><span class="header-section-number">18.4</span> 扩展阅读资料</h2>
<ol style="list-style-type: decimal">
<li><a href="https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#specificity" class="uri">https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#specificity</a></li>
<li><a href="https://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#cascade" class="uri">https://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#cascade</a></li>
</ol>

</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="css-selector.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="css-unit.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/clipboard.min.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": true,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": ["facebook", "twitter", "linkedin", "weibo", "instapaper"]
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/yangjh-xbmu/front-end/edit/master/0203-CSS-cascade.Rmd",
"text": "编辑"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": ["front-end.pdf", "front-end.epub"],
"toc": {
"collapse": "section"
}
});
});
</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    var src = "true";
    if (src === "" || src === "true") src = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML";
    if (location.protocol !== "file:")
      if (/^https?:/.test(src))
        src = src.replace(/^https?:/, '');
    script.src = src;
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>
</body>

</html>
